Javascript 当清除搜索输入字段时，如何从搜索筛选器隐藏列表项？

我有如下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>

当用户开始在

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";
        }
    }
}

函数搜索（）{
//声明变量
var输入、滤波器、ul、li、a、i；
输入=document.getElementById（'searchInput'）；
filter=input.value.toUpperCase（）；
ul=document.getElementById（“果实”）；
li=ul.getElementsByTagName（'li'）；
//循环浏览所有列表项，并显示与搜索查询匹配的项
对于（i=0；i-1）{
li[i].style.display=“block”；
}否则{
li[i].style.display=“无”；
}
}
}

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

当用户清除

输入

字段时，如何重置列表项并将其全部隐藏

---

首先，您需要更改html。您需要添加

然后，您可以设置一个条件来检查输入的长度是否超过一个

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";
        }
    }
}

函数搜索（）{
//声明变量
var输入、滤波器、ul、li、a、i；
输入=document.getElementById（'searchInput'）；
filter=input.value.toUpperCase（）；
ul=document.getElementById（“果实”）；
li=ul.getElementsByTagName（'li'）；
if（input.value.length==0）{
ul.style.display=“无”；
返回；
}否则{
ul.style.display=“块”；
}
//循环浏览所有列表项，并隐藏与搜索查询不匹配的项
对于（i=0；i-1）{
li[i].style.display=“block”；
}否则{
li[i].style.display=“无”；
}
}
}

---

这里有一个有效的

用if语句启动函数，检查值是否为“”，然后根据该值决定是否必须完成其余代码

var input, filter, ul, li, a, i;
 input = document.getElementById('searchInput');
 if (input.value==''){
 document.getElementById("fruits").style.display='none';
 }
 else{
 // the rest of the function
 }

---

提示：您应该添加事件侦听器，而不是使用内联事件

    if (document.GetElementById('searchInput').value == '')
    {
        for (i = 0; i < li.length; i++)
        {
            li[i].style.display = none;
        }
    } else {
        // REST OF CODE
    }

if（document.GetElementById（'searchInput'）。value=''）
{
对于（i=0；i

因为您的函数在每个

KeyUp

事件上都会被调用，只需将

---

函数中的if语句将起作用。

您可以使用JQuery

keyup

获取实时区分大小写的搜索。使用

显示

和

隐藏

，可以显示相关结果。以下是更新的代码：

$（“#searchInput”）。在（'keyup'，function（）上{
var searchValue=$（this.val（）；
searchAndFilter（searchValue）
});
函数searchAndFilter（searchTerm）{
如果（searchTerm==''）{
$（“#水果里”）.hide（）
}否则{
$（“#li”）。每个（函数（）{
var currentText=$（this.text（）；
currentText=currentText.toUpperCase（）；
searchTerm=searchTerm.toUpperCase（）；
if（currentText.indexOf（searchTerm）>=0）{
$（this.show（）；
}
});
}
}
$（文档）.ready（函数（）{
$（“#水果里”）.hide（）；
});


芒果
苹果
葡萄
樱桃
你显然是从w3schools那里得到的，这意味着你确实复制了n'粘贴。您应该对它进行更多的编辑，因为w3schools中的一个显示了所有项目的开头和结尾。因此，最好的解决方案是添加一个if…else语句，如下所示：

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

if（input.value.length==false）{
ul.style.display=“无”
}否则{
ul.style.display=“块”
}

或者，您也可以使用switch语句。
只需先测试输入值，如果输入值为空，则进行特殊处理。在这种特殊情况下，请将它们全部隐藏。即使更改为后，您的搜索仍无法工作。听起来您正在尝试实现数据列表已经可以实现的功能，而无需编码。它是否可取取决于您需要的浏览器支持，我想。@HemaNandagopal它不起作用，因为他在他的
标记中缺少
标记。我在回答中解释过。是的，看到了：）我发布它是因为OP说它按预期工作，所以。首先，它不起作用！第二，当问题都在纯Javascript中时，您正在使用JQuery什么不起作用？第二，这个问题被标记为JQuery。你的答案完全错了。当用户搜索时，它不会显示答案，因为它区分大小写。当输入为空时，更重要的结果不会隐藏：）如果您想知道如何在这里修复它，您可以使用jsfiddle@edisoni.1337。伟大的我将尝试使用jQuery而不是jsp。请看3年前@edison biba接受的答案。问题不在于复制粘贴的代码，而是针对代码中的错误元素。
    if (document.GetElementById('searchInput').value == '')
    {
        for (i = 0; i < li.length; i++)
        {
            li[i].style.display = none;
        }
    } else {
        // REST OF CODE
    }