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

如何解决如何设计一个网站的搜索框？

我为网站定制了 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>

解决方法

如果输入是空字符串，即 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>

,

我已经快速重构了您的代码，以便它支持多个值并保留带有链接的列表以备不时之需。

这也只会创建与搜索词匹配的列表项。

我不知道这对性能是否更好，但将元素添加到数组比创建 html 元素来保存值更容易。

    function myFunction() {
        let ul = document.querySelector('#myUL')
        ul.innerHTML = '';
        
        let inputVal = document.querySelector("#myInput").value;
        if(inputVal.length == 0){
            return;
        }

        
        let possibleValues = ['tree','bike','sea','mobile'];
        
        let resSpan = document.querySelector('#res');
        let resVal = [];
        
        
        possibleValues.forEach(str => {
            if(str.includes(inputVal)){
                resVal.push(str)
            }
        })
        
        if(resVal.length > 0){
            resVal.forEach(v => {
                let newLi = document.createElement('li');
                let newAnc = document.createElement('a');
                
                newAnc.innerText = v;
                newLi.appendChild(newAnc);
                ul.appendChild(newLi);
            })
        } 

        
    }

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

,

好的，下面是您的代码的工作版本。我知道这个问题已经有人回答了，但是这个版本支持多个 li 作为搜索结果出现：

（做了 2 处更改 - li 的开头隐藏，然后在搜索栏为空时重新隐藏）

function myFunction() {
    var input,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 && filter.length > 0) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}

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

<ul id="myUL">
  <li style="display:none;"><a href="#">tree</a></li>
  <li style="display:none;"><a href="#">bike</a></li>
  <li style="display:none;"><a href="#">sea</a></li>
  <li style="display:none;"><a  href="#">mobile</a></li>
</ul>

,

const input = document.getElementById("myInput");
const ul = document.getElementById("myUL");
const li = ul.getElementsByTagName("li");
for (i of li) i.style.display = "none" ;

function myFunction() {
  let filter,txtValue;
  filter = input.value.toUpperCase();
  if (filter) {
    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 = "block";
      } else {
        li[i].style.display = "none";
      }
    }
  }else for (i of 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>