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>现在都可见，而不是隐藏。

如何重置列表项＆amp;当用户清除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

Answer 2

使用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
 }

Answer 3

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

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

因为你的函数会在每个KeyUp事件中被调用，所以只需要调用 if函数内部的语句是否有效。

Answer 4

您可以使用JQuery keyup来获取实时区分大小写的搜索。使用show和hide，您可以显示相关结果。以下是更新的代码：

＆＃13;

$("#searchInput").on('keyup', function() {
  var searchValue = $(this).val();
  searchAndFilter(searchValue)
});

function searchAndFilter(searchTerm) {
  if (searchTerm == '') {
    $("#fruits li").hide()
  } else {
    $("#fruits li").each(function() {
      var currentText = $(this).text();
      currentText = currentText.toUpperCase();
      searchTerm = searchTerm.toUpperCase();
      if (currentText.indexOf(searchTerm) >= 0) {
        $(this).show();
      }
    });
  }
}

$(document).ready(function() {
  $("#fruits li").hide();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="searchInput" placeholder="Search fruits">

<ul id="fruits">
  <li>Mango</li>
  <li>Apple</li>
  <li>Grape</li>
  <li>Cherry</li>
</ul>

＆＃13;

Answer 5

您显然是从w3schools获得的，这意味着您确实复制了n'paste。您应该对它进行更多的编辑，因为w3schools中的那个在开头和结尾都显示了所有项目。因此，最好的解决方案是添加一个if ... else语句，如下所示：

    if(input.value.length === false) {
        ul.style.display = "none"
    } else {
        ul.style.display = "block"
    }

或者，您也可以使用switch语句。

当搜索输入字段被清除时，如何隐藏搜索过滤器中的列表项？

5 个答案: