javascript - 如何设计一个网站的搜索框？

Question

我为网站定制了 li 过滤器，但我需要在初始阶段隐藏所有 li。我需要隐藏页面中的所有 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>