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

Question

我正在练习使用循环来处理 index.html 上的数据。我目前正在尝试过滤一个输入文本字段，它会在用户键入时显示数据并隐藏其余数据。

//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>

Answer 1

您可以对 querySelectorAll 的结果调用 forEach。只需遍历每个 <li> 并切换 class 即 .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-loop，你可以像这样简单地修改上面的脚本：

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>

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

Text Input filter not initalizing?

javascript

for-loop

if-statement

list