javascript - 如何为网站设计搜索框？

Question

我有一个网站的自定义李过滤器，但我需要在初始阶段隐藏所有李。我需要隐藏页面中的所有li并仅显示搜索li。但问题是，当我尝试隐藏 li 时，它也会在结果期间阻止所有 li。

function myFunction() {
    var input, filter, ul, li, a, i, txtValue;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        txtValue = a.textContent || a.innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search...">

<ul id="myUL">
  <li><a href="#">tree</a></li>
  <li><a href="#">bike</a></li>
  <li><a href="#">sea</a></li>
  <li><a href="#">mobile</a></li>
</ul>

Answer 1

如果输入是空字符串，即 ""，您可以隐藏所有 li 元素，并在用户输入输入时以及第一次输入时运行该函数。 JS 加载。

function myFunction() {
  var input, filter, ul, li, a, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName("li");

  if (input.value === "") {
    [...li].forEach((liElement) => {
      liElement.style.display = "none";
    });
  } else {
    for (i = 0; i < li.length; i++) {
      a = li[i].getElementsByTagName("a")[0];
      txtValue = a.textContent || a.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        li[i].style.display = "";
      } else {
        li[i].style.display = "none";
      }
    }
  }
}

myFunction();

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search...">

<ul id="myUL">
  <li><a href="#">tree</a></li>
  <li><a href="#">bike</a></li>
  <li><a href="#">sea</a></li>
  <li><a href="#">mobile</a></li>
</ul>