结果为js的下拉菜单

Question

我正在编写一个搜索菜单，用于搜索纯js字符串中所有匹配的子字符串并在页面上显示。我在页面上进行搜索，但是我不知道如何在搜索下拉菜单中显示结果，而在图片上仅使用js来显示结果数量。我的代码和图片如下：

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

也许是这样的：

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

我编写了这段代码，它使您可以计算带有搜索词的文本中的单词数。并且您会获得包含您的搜索词的动态单词列表。 （我只触摸HTML和JS文件）

提示：如果要使动态列表更“美观”，请使用列表标签（如<div id="listFound"></div>和<ul>更改<li>，但保留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>