过滤器/搜索列表中输入框为空时如何隐藏列表答案

【问题标题】：how to hide the list when the input box is blank in Filter/Search List过滤器/搜索列表中输入框为空时如何隐藏列表
【发布时间】：2020-07-10 17:26:10
【问题描述】：

我正在尝试创建一个过滤器/搜索列表，我知道我想隐藏该列表，直到用户尝试键入并在用户删除 (myInput) 字段中的所有字符时隐藏它

这是两个标签输入（myInput）和列表（mylist）

<input id="myInput" type="search" placeholder="type to search" />
<ul id="myList">
  <li><a href="#">X</a></li>
  <li><a href="#">Y</a></li>
  <li><a href="#">Z</a></li>
</ul>

这个 jquery 代码 $("#myList") 隐藏在加载页面中，直到用户开始输入，但是如果用户删除框中的所有字符，我该如何再次隐藏列表？

$("#myInput").on("keyup", function() {
  var value = $(this).val().toLowerCase();
  $("#myList li").filter(function() {
    $("#myList").show();
    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
  });
});

【问题讨论】：

标签： javascript html jquery input

【解决方案1】：

您必须使用 event interface 或您尝试设置的实际值为其设置一个简单的条件，您可以执行其中任何一个，但在我看来 （因为它会阻止创建不必要的jQuery 元素如$(this))，使用事件会更有效率。因此，只要输入值有某些内容，您就可以运行过滤器功能，否则您将隐藏任何内容。

$("#myInput").on("keyup", function(event) {
  if (event.target.value) {
    var value = $(this).val().toLowerCase();
    $("#myList li").filter(function() {
      $("#myList").show();
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  } else {
    $("#myList").hide();
  }
});

#myList {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="myInput" type="search" placeholder="type to search" />
<ul id="myList">
  <li><a href="#">X</a></li>
  <li><a href="#">Y</a></li>
  <li><a href="#">Z</a></li>
</ul>

【讨论】：

【解决方案2】：

考虑以下内容。

$(function() {
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    if (value.length) {
      $("#myList li").filter(function() {
        $("#myList").show();
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
      });
    } else {
      $("#myList").hide();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="myInput" type="search" placeholder="type to search" />
<ul id="myList">
  <li><a href="#">X</a></li>
  <li><a href="#">Y</a></li>
  <li><a href="#">Z</a></li>
</ul>

【讨论】：