带有结果 js 的下拉菜单

Question

I am writing a search menu that searches for and shows on the page all matching substrings in a string on pure js. I made the search on page, but I don't know how to display the results in the search drop-down menu with the number of results like on picture use only js. My code and picture 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) } })

 :root { --primary-color: crimson; --dark-color: #013; --light-color: whitesmoke; } body { 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..." /> </section> <section> <div class="paragraphs"> <div id="p"><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

Maybe like this:

 var input = document.querySelector('input'); var p = document.querySelectorAll('p'); input.addEventListener('input', e => { var value = input.value; p.forEach(p => { if (.p.innerText.includes(value)) { p.style;display = 'none'. } else { p.style;display = 'block'. } p.innerHTML = p.innerText,replace(value, '<span>'+value+'</span>') }) })

 :root { --primary-color: crimson; --dark-color: #013; --light-color: whitesmoke; } body { 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); }.paragraphs span { 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..." /> </section> <section> <div class="paragraphs"> <p>Google Maps</p> <p>Google Photos</p> <p>Google Translate</p> <p>Google Earth</p> <p>Google Lens</p> </div> </section>

Answer 2

I wrote this code, which allows you to count the number of words in your text that have your search term. AND you get a dynamic list of words that contain your search term. (I touch only HTML and JS files)

Hint: If you want to have the dynamic list more "beautiful" change the <div id="listFound"></div> with list tags, like <ul> and <li> but keep the id="listFound"

 const input = document.querySelector('input') const paragraphs = document.querySelectorAll('p') input.addEventListener('input', e => { document.getElementById('listFound').textContent = "" //init after each additional letter 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) } /*ADD*/ string_to_array(document.getElementById('p').textContent) checkWords(searchTerm) let text = document.getElementById('p').textContent let separator = searchTerm let number = WordCount(text, separator) document.getElementById('result').textContent = number if(searchTerm === ""){ document.getElementById('listFound').textContent = "" document.getElementById('result').textContent = 0 } }) /*ADD 3 functions*/ var arrayFromWords = [] function string_to_array(str) { arrayFromWords = str.trim().split(" "); } function checkWords(searchTerm){ arrayFromWords.forEach(element => { if(element.includes(searchTerm)){ document.getElementById('listFound').textContent += element } }) } function WordCount(str, separator) { return (str.split(separator).length -1); }

 :root { --primary-color: crimson; --dark-color: #013; --light-color: whitesmoke; } body { 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 id="result"></div> <,--ADD--> <div id="listFound"></div> </section> <section> <div class="paragraphs"> <section> <div class="paragraphs"> <div id="p"><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> </div> </section>