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

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。您需要在 <li> 标记中添加 <a>，因为在您的 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，可以显示相关结果。以下是更新后的代码：

$("#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();
});

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

Answer 5

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

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

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