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>