当搜索/过滤列表组中的字段为空白时隐藏结果答案

【问题标题】：Hide results when field is blank in a search/filter list group当搜索/过滤列表组中的字段为空白时隐藏结果
【发布时间】：2020-12-26 21:48:41
【问题描述】：

我有一个列表组，其中所有结果最初都是隐藏的，只有在使用搜索字段按名称找到时才可见。当搜索字段为空白时（例如退格或删除且不存在输入），我需要将结果返回到隐藏状态。

https://jsfiddle.net/Nick_Chand/tpyca68k/

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

$(document).ready(function() {
  $("#myList li").hide();
});
</script>

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h3>Header Text</h3>
<h4>Header Subtext</h4>
  <p>Paragraph subtext</p>  
  <input class="form-control" id="myInput" type="text" placeholder="Search..">
  <br>
  <ul class="list-group" id="myList">
    <li class="list-group-item">Acme Industries <a class="btn btn-success" href=# role="button">Go to ordering portal</a></li>
    <li class="list-group-item">Marvel Entertainment <a class="btn btn-success" href=# role="button">Go to ordering portal</a></li>
    <li class="list-group-item">007 Enterprises <a class="btn btn-success" href=# role="button">Go to ordering portal</a></li>
    <li class="list-group-item">DC Comics <a class="btn btn-success" href=# role="button">Go to ordering portal</a></li>
  </ul>  
</div>
</body>

【问题讨论】：

请选择已解决的多个答案之一。因为您的问题仍然悬而未决。

标签： javascript html

【解决方案1】：

只需将其包装在条件 if 中即可。

并且不要重复事件$(document).ready(function(){ ... });。

$(document).ready(function(){
  $("#myList li").hide();

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

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h3>Header Text</h3>
<h4>Header Subtext</h4>
  <p>Paragraph subtext</p>  
  <input class="form-control" id="myInput" type="text" placeholder="Search..">
  <br>
  <ul class="list-group" id="myList">
    <li class="list-group-item">Acme Industries <a class="btn btn-success" href=# role="button">Go to ordering portal</a></li>
    <li class="list-group-item">Marvel Entertainment <a class="btn btn-success" href=# role="button">Go to ordering portal</a></li>
    <li class="list-group-item">007 Enterprises <a class="btn btn-success" href=# role="button">Go to ordering portal</a></li>
    <li class="list-group-item">DC Comics <a class="btn btn-success" href=# role="button">Go to ordering portal</a></li>
  </ul>  
</div>
</body>

【讨论】：

【解决方案2】：

您可以在您的keyup 事件处理程序中包含一个值为空的测试，如果是，则隐藏所有元素。否则，搜索匹配的元素并显示它们。请注意，您的代码还会搜索“转到订购门户”文本；您可能希望将您实际想要搜索的文本包含在（例如）一个跨度中（就像我在 sn-p 中所做的那样）以防止这种情况发生。另请注意，对于您正在做的事情，$.each 比 $.filter 更合适。

$(document).ready(function() {
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myList li").hide();
    if (value !== '') {
      var spans = $("#myList li span.search").filter(function() {
        return $(this).text().toLowerCase().indexOf(value) > -1;
      });
      $(spans).each(function() {
        $(this).parent().show();
      });
      $('#contact').toggle(spans.length);
    }
  });
});

$(document).ready(function() {
  $("#myList li").hide();
  $('#contact').hide();
});

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container">
    <h3>Header Text</h3>
    <h4>Header Subtext</h4>
    <p>Paragraph subtext</p>
    <input class="form-control" id="myInput" type="text" placeholder="Search..">
    <br>
    <div id="contact">No results found - fill in form below to contact us</div>
    <ul class="list-group" id="myList">
      <li class="list-group-item"><span class="search">Acme Industries</span> <a class="btn btn-success" href=# role="button">Go to ordering portal</a></li>
      <li class="list-group-item"><span class="search">Marvel Entertainment</span> <a class="btn btn-success" href=# role="button">Go to ordering portal</a></li>
      <li class="list-group-item"><span class="search">007 Enterprises</span> <a class="btn btn-success" href=# role="button">Go to ordering portal</a></li>
      <li class="list-group-item"><span class="search">DC Comics</span> <a class="btn btn-success" href=# role="button">Go to ordering portal</a></li>
    </ul>
  </div>
</body>

【讨论】：

优秀。这样可行。无论如何添加诸如“未找到结果 - 单击此处填写表格以联系我们”之类的内容
@NickChand note 我已经编辑了答案，这样您就可以避免搜索 Go to ordering portal 文本，否则当您在搜索框中输入 er 时，该文本会匹配所有条目。
我猜。对不起，我不太熟悉。现在，我在上面的搜索字段下有一个单独的 HTML 元素，当用户无法找到公司名称时，我希望他们以上面下面的单独表单进行响应。
@NickChand 请查看我的编辑。我添加了一个可以显示该消息的 div。您可能会添加一个按钮以单击该 div 以转到表单
谢谢你这工作，但小问题。使用的引导样式表正在修改我的 wordpress 页面的布局。它正在覆盖主题字体和布局。