如何设计网站的搜索框？

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>

Answer 2

我已快速重构您的代码，使其支持多个值并保留包含链接的列表，以备您需要时使用。

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

我不知道这对性能是否更好，但是向数组添加元素比创建 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>

Answer 3

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

（进行了 2 次更改 - lis 开始隐藏，然后在搜索栏为空时重新隐藏）

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 && 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>

Answer 4

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, a, i, 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>

如何设计网站的搜索框？

How to design a search box for a website?

html

javascript

css

searchbar