Search result in dropdown menu on pure 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>