javascript - 清除搜索输入字段后，如何从搜索过滤器中隐藏列表项？

Question

我有一个这样的 HTML 列表项:

<ul id="fruits">
 <li><a href="#">Mango</a></li>
 <li><a href="#">Apple</a></li>
 <li><a href="#">Grape</a></li>
 <li><a href="#">Cherry</a></li>
</ul>

用户不会看到这些项目，因为我们用 display: none; 样式隐藏了它们. 用户可以从下面搜索这些项目 input领域:

<input type="text" id="searchInput" onkeyup="fruitSearch()" placeholder="Search fruits">

当用户开始在 input 上搜索水果名称时字段，它将列出匹配的名称，就像谷歌搜索建议一样。 使用下面的 JavaScript 进行搜索:

function fruitSearch() {
    // Declare variables
    var input, filter, ul, li, a, i;
    input = document.getElementById('searchInput');
    filter = input.value.toUpperCase();
    ul = document.getElementById("fruits");
    li = ul.getElementsByTagName('li');

    // Loop through all list items, and show those who match the search query
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "block";
        } else {
            li[i].style.display = "none";
        }
    }
}

直到这里，一切都按设计和预期工作，一旦用户清除了所有水果列表项的输入字段 <li>现在可见而不是隐藏。

当用户清除 input 时，如何重置列表项并全部隐藏它们领域？

https://jsfiddle.net/kingBethal/cjbwomof/

Answer 1

首先你需要改变你的html。您需要添加 <a>在你的里面 <li>标记，因为在您的 JavaScript 代码中，您从 <a> 获取内容元素。

<ul id="fruits">
 <li><a href="#">Mango</a></li>
 <li><a href="#">Apple</a></li>
 <li><a href="#">Grape</a></li>
 <li><a href="#">Cherry</a></li>
</ul>

然后你可以做一个条件来检查输入的长度是否大于一个

function fruitSearch() {
    // Declare variables
    var input, filter, ul, li, a, i;
    input = document.getElementById('searchInput');
    filter = input.value.toUpperCase();
    ul = document.getElementById("fruits");
    li = ul.getElementsByTagName('li');

    if(input.value.length == 0){
        ul.style.display = "none";
        return;
    }else{
        ul.style.display = "block";
    }
    // Loop through all list items, and hide those who don't match the search query
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "block";
        } else {
            li[i].style.display = "none";
        }
    }
}

这里你有一个工作 jsfiddle