在纯 js 的下拉菜单中搜索结果

Question

Continuation of my question. There is a search block, a string is searched among the "p" blocks on the page, the number of blocks is displayed.
I cannot make it so that the blocks that contain the search string are reflected in the drop-down list as in the picture.
Question:
how to make a drop-down list with "p" blocks that contain the desired string in pure js.

An example in the picture, the available code below:

 const input = document.querySelector('input') const paragraphs = document.querySelectorAll('p') input.addEventListener('input', e => { const searchTerm = e.target.value const regex = new RegExp(searchTerm, 'g') const replacement = `<span class="highlighted">${ searchTerm }</span>` for (const p of paragraphs) { p.innerHTML = p.innerText.replace(regex, replacement) } let text = document.getElementById('texts').textContent let separator = searchTerm let number = WordCount(text, separator) //console.log("found ",number," times") document.getElementById('result').textContent = number }) function WordCount(str, separator) { return (str.split(separator).length - 1); }

 @import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,400i&display=swap'); :root { --primary-color: crimson; --dark-color: #013; --light-color: whitesmoke; } body { font-family: 'Roboto Mono', monospace; color: var(--dark-color); background-color: var(--light-color); padding: 1rem; } header { text-align: center; } main { max-width: 567px; margin: 0 auto; }.search__container { text-align: center; padding: 1rem; margin: 0 auto; }.search__input { border: 2px solid var(--dark-color); padding: 1rem; text-align: center; }.search__input:hover, .search__input:focus { outline: none; border-color: var(--primary-color); -webkit-box-shadow: 0 0 5px 0.1px var(--primary-color); box-shadow: 0 0 5px 0.1px var(--primary-color); }.highlighted { text-shadow: 0 0 6px var(--primary-color); color: var(--primary-color); }

 <section class="search__container"> <input class="search__input" type="text" spellcheck="false" placeholder="search..." /> <div> Количество: <div id="result"></div> </div> </section> <section> <div class="paragraphs"> <div id="texts"> <p>Buffalofish sawtooth </p> <p>eel tigerperch, john dory sleeper,</p> <p>Spanish mackerel </p> <p>sockeye salmon sturgeon </p> <p>gray mullet bottlenose. </p> <p>Banjo catfish wallago; deep </p> <p>sea smelt titan triggerfish </p> <p>Australian grayling threadfin </p> <p>bighead carp longnose lancetfish </p> <p>pineconefish. Pipefish mojarra </p> <p>northern pearleye cutthroat trout </p> <p>sand diver; freshwater shark wrasse. </p> </div> </div> </section>

Answer 1

Inside the p loop, you can check if each p content contains the inputed text using String.prototype.match and if no matches, update the style to hide the p tag as follows.

for (const p of paragraphs) {
  // Check if the matches are existed
  if (p.innerText.match(regex) == null) {
    // If no match, hide the p tag.
    p.style.display = 'none';
  } else {
    // If match exists, show the p tag.
    p.style.display = 'block';
    p.innerHTML = p.innerText.replace(regex, replacement)
  }
}

 const input = document.querySelector('input') const paragraphs = document.querySelectorAll('p') input.addEventListener('input', e => { const searchTerm = e.target.value const regex = new RegExp(searchTerm, 'g') const replacement = `<span class="highlighted">${ searchTerm }</span>` for (const p of paragraphs) { if (p.innerText.match(regex) == null) { p.style.display = 'none'; } else { p.style.display = 'block'; p.innerHTML = p.innerText.replace(regex, replacement) } } let text = document.getElementById('texts').textContent let separator = searchTerm let number = WordCount(text, separator) //console.log("found ",number," times") document.getElementById('result').textContent = number }) function WordCount(str, separator) { return (str.split(separator).length - 1); }

 @import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,400i&display=swap'); :root { --primary-color: crimson; --dark-color: #013; --light-color: whitesmoke; } body { font-family: 'Roboto Mono', monospace; color: var(--dark-color); background-color: var(--light-color); padding: 1rem; } header { text-align: center; } main { max-width: 567px; margin: 0 auto; }.search__container { text-align: center; padding: 1rem; margin: 0 auto; }.search__input { border: 2px solid var(--dark-color); padding: 1rem; text-align: center; }.search__input:hover, .search__input:focus { outline: none; border-color: var(--primary-color); -webkit-box-shadow: 0 0 5px 0.1px var(--primary-color); box-shadow: 0 0 5px 0.1px var(--primary-color); }.highlighted { text-shadow: 0 0 6px var(--primary-color); color: var(--primary-color); }

 <section class="search__container"> <input class="search__input" type="text" spellcheck="false" placeholder="search..." /> <div> Количество: <div id="result"></div> </div> </section> <section> <div class="paragraphs"> <div id="texts"> <p>Buffalofish sawtooth </p> <p>eel tigerperch, john dory sleeper,</p> <p>Spanish mackerel </p> <p>sockeye salmon sturgeon </p> <p>gray mullet bottlenose. </p> <p>Banjo catfish wallago; deep </p> <p>sea smelt titan triggerfish </p> <p>Australian grayling threadfin </p> <p>bighead carp longnose lancetfish </p> <p>pineconefish. Pipefish mojarra </p> <p>northern pearleye cutthroat trout </p> <p>sand diver; freshwater shark wrasse. </p> </div> </div> </section>