文本输入过滤器未初始化？答案

//adds input elements let search = document.getElementById('search'); search.addEventListener('keyup', filterNames); //Grabs information in ul and li function filterNames (){ let filterValue = document.getElementById('filterNames'); let ul = document.getElementById ('names'); let li = ul.querySelectorAll('li.name-item'); //loop for collection of items for (let i = 0; i < li.length; i++) { let a = li[i].getElementByTagName('a') [0]; // if statement for loop if (a.innerHTML.toUpperCase().indexOf(filterValue) > -1){ li[i].style.display=' '; } else { li[i].style.display='none'; } } }

<div class="wrapper"> <input type="text" id="search" placeholder="Search Name..."> <ul class="game-characters" id="names"> <li class="Mario"><a href="#"><h3>Mario</h3></a></li> <li class="Link"><a href="#"><h3>Link</h3></a></li></li> <li class="Zelda"><a href="#"><h3>Zelda</h3></a></li></li> <li class="Bowser"><a href="#"><h3>Bowser</h3></a></li></li> <li class="Kratos"><a href="#"><h3>Kratos</h3></a></li></li> <li class="Yoshi"><a href="#"><h3>Yoshi</h3></a></li></li> </ul> </div>

【解决方案1】：

您可以根据querySelectorAll 的结果调用forEach。只需遍历每个 <li> 并切换一个类，即 .hidden，而不是修改 DOM。此外，字符串对象有一个includes 方法。

const filterNameList = ({ target: { value } }) => {
  const query = value.trim().toLowerCase();  
  document.querySelectorAll('#names li').forEach(li => {
    const curr = li.textContent.trim().toLowerCase();
    const show = !query || (query && curr.includes(query));
    li.classList.toggle('hidden', !show);
  });
};

const searchEl = document.getElementById('search');
searchEl.addEventListener('keyup', filterNameList);

.hidden { display: none; }

<div class="wrapper">
  <input type="text" id="search" placeholder="Search Name..." autocomplete="off">
  <ul class="game-characters" id="names">
    <li class="Mario">  <a href="#"> <h3>Mario</h3>  </a> </li>
    <li class="Link">   <a href="#"> <h3>Link</h3>   </a> </li>
    <li class="Zelda">  <a href="#"> <h3>Zelda</h3>  </a> </li>
    <li class="Bowser"> <a href="#"> <h3>Bowser</h3> </a> </li>
    <li class="Kratos"> <a href="#"> <h3>Kratos</h3> </a> </li>
    <li class="Yoshi">  <a href="#"> <h3>Yoshi</h3>  </a> </li>
  </ul>
</div>

如果你想坚持一个for循环，你可以简单地修改上面的脚本：

const filterNameList = ({ target: { value } }) => {
  const query = value.trim().toLowerCase();  
  const items = document.querySelectorAll('#names li');
  
  for (let i = 0; i < items.length; i++) {
    const li = items[i];
    const curr = li.textContent.trim().toLowerCase();
    const show = !query || (query && curr.includes(query));
    li.classList.toggle('hidden', !show);
  }
};

const searchEl = document.getElementById('search');
searchEl.addEventListener('keyup', filterNameList);

.hidden { display: none; }

<div class="wrapper">
  <input type="text" id="search" placeholder="Search Name..." autocomplete="off">
  <ul class="game-characters" id="names">
    <li class="Mario">  <a href="#"> <h3>Mario</h3>  </a> </li>
    <li class="Link">   <a href="#"> <h3>Link</h3>   </a> </li>
    <li class="Zelda">  <a href="#"> <h3>Zelda</h3>  </a> </li>
    <li class="Bowser"> <a href="#"> <h3>Bowser</h3> </a> </li>
    <li class="Kratos"> <a href="#"> <h3>Kratos</h3> </a> </li>
    <li class="Yoshi">  <a href="#"> <h3>Yoshi</h3>  </a> </li>
  </ul>
</div>

【讨论】：

的 innerText 进行比较 3.