文本輸入過濾器未初始化？

我正在練習使用回圈來處理我的 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>

uj5u.com熱心網友回復：

您可以呼叫forEach. querySelectorAll只需遍歷每個<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>

標籤：

上一篇：if陳述句回傳[[:未找到

下一篇：Snowflake-轉義反斜杠和雙引號