Question

当用户对输入进行任何更改时，浏览器将使用for循环循环所有li标签，并在尝试indexOf（inputText）时检查返回的内容。如果indexOf返回-1，则需要对其进行过滤并且不显示在屏幕上。

这是我的简单HTML

<form>
....
  <div>
     <input type="text" name="ingredientSearch" placeholder="ingredients..">
  </div>
</form>
<div id="IngredientsList" class="noneDisplay">
  <ul>
      <li class="items">Apple</li>
      <li class="items">Asparagus</li>
      <li class="items">Baking Powder</li>
      <li class="items">Balsamic Vinegar</li>
      .......
      .......
      <li class="items">Vinegar</li>
      <li class="items">Wheat Flour</li>
      <li class="items">White Wine</li>
  </ul>
</div>

这是我的JavaScript代码。

function showListItems(){
let searchField=document.getElementsByName("ingredientSearch")[0];
let items = document.getElementsByClassName("items");
searchField.addEventListener("keyup",function(){
    if(document.getElementById("IngredientsList").hasAttribute("class","noneDisplay")){
        document.getElementById("IngredientsList").removeAttribute("class","noneDisplay");
    }
    filterListItems(items);
})
}

function filterListItems(items){
let inputText = document.getElementsByName("ingredientSearch")[0].value.toUpperCase();
for(var i=0;i<items.length;i++){
    let itemsText = items[i].textContent.toUpperCase();
    if(itemsText.indexOf(inputText)==-1){
        items[i].setAttribute('class','noneDisplay');
    }else{
        items[i].removeAttribute('class','noneDisplay');
    }
}

}

showListItems();

class noneDisplay表示CSS显示：无

所以我的想法是，如果我在输入中输入apple，浏览器将为所有列表项（第一个除外）设置noneDisplay类。如果用户键入Strawberry，浏览器将为所有列表项设置noneDisplay类，但该列表中的值为“ Strawberry”。

但这就是我得到的

如果您在没有Jquery的情况下可以帮助我，将非常感谢，因为我正在尝试不使用它。

Answer 1

根据您的回答，我认为您正在尝试修改元素的类。为此，您可以使用classList属性。我已经清理了一些代码并将其格式化。

function showListItems() {
  const searchField = document.getElementsByName("ingredientSearch")[0];
  const items = document.getElementsByClassName("items");
  searchField.addEventListener("keyup", function() {
    const ingredientsList = document.getElementById("IngredientsList");
    if (ingredientsList.classList.contains("noneDisplay")) {
      ingredientsList.classList.remove("noneDisplay");
    }
    filterListItems(items);
  });
}

function filterListItems(items) {
  const inputText = document.getElementsByName("ingredientSearch")[0].value.toUpperCase();
  for (let i = 0; i < items.length; i++) {
    const itemsText = items[i].textContent.toUpperCase();
    if (itemsText.indexOf(inputText) > -1) {
      items[i].classList.remove("noneDisplay");
      continue;
    }
    items[i].classList.add("noneDisplay");
  }
}

showListItems();

正如评论中提到的那样，我个人认为您可以基于items数组将其过滤并映射到ul列表中，我认为这样做更简单，更易于维护和维护。也更容易阅读。

<!DOCTYPE html>
<html>
  <meta charset="utf-8" />
  <body>
    <input id="input" placeholder="Search..." />
    <ul id="ingredients-list">
      <!-- List items will be created with javascript -->
    </ul>
    <script>
      const updateList = (items = []) => {
        const list = document.getElementById("ingredients-list");
        // Clear list items
        while (list.firstChild) {
          list.firstChild.remove();
        }
        if (items && Array.isArray(items) && items.length > 0) {
          // Rerender with new list items
          items.forEach(item => {
            const listItem = document.createElement("li");
            listItem.appendChild(document.createTextNode(item));
            list.appendChild(listItem);
          });
        }
      };

      const handleOnChange = e => {
        const { value } = e.target;
        updateList(
          items.filter(item => item.toUpperCase().includes(value.toUpperCase()))
        );
      };

      const items = [
        "Apple",
        "Asparagus",
        "Baking Powder",
        "Balsamic Vinegar",
        "Vinegar",
        "Wheat Flour",
        "White Wine"
      ];

      updateList(items);

      const input = document.getElementById("input");
      input.addEventListener("keyup", handleOnChange);
    </script>
  </body>
</html>

使用我的方法进行演示：https://codesandbox.io/s/html-filter-list-nolnk?fontsize=14&hidenavigation=1&theme=dark

for循环中的setAttribute异常

1 个答案: