需要帮助jQuery搜索过滤器自定义

Question

我用jQuery创建了一个搜索列表过滤器。我需要一些帮助来定制它。

我有3个单独的div，而在div中我有搜索结果的列表元素。

如果搜索结果与div匹配，我想隐藏其他div。查看下面的截图 -

screenshot

以下是完整的示例代码 -
https://codepen.io/anon/pen/eGxrGR

＆＃13;

＆＃13;

$('#box').keyup(function() {
  var valThis = $(this).val().toLowerCase();
  if (valThis == "") {
    $('.navList > li').show();
  } else {
    $('.navList > li').each(function() {
      var text = $(this).text().toLowerCase();
      (text.indexOf(valThis) >= 0) ? $(this).show(): $(this).hide();
    });
  };
});

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class="container">


  <div class="col-lg-12 ">
    <input placeholder="Search Me" id="box" type="text" />
  </div>

  <div class="col-lg-12 col col-1">

    <h2> My List 1 </h2>

    <ul class="navList ">
      <li>special</li>
      <li>apples</li>
      <li>apricots</li>
      <li>acai</li>
      <li>blueberry</li>
      <li>bananas</li>
      <li>cherry</li>
      <li>coconut</li>
      <li>donut</li>
      <li>durean</li>

    </ul>

    <ul class="navList ">
      <li>apples</li>
      <li>apricots</li>
      <li>acai</li>
      <li>blueberry</li>
      <li>bananas</li>
      <li>cherry</li>
      <li>coconut</li>
      <li>donut</li>
      <li>durean</li>

    </ul>

    <ul class="navList ">
      <li>apples</li>
      <li>apricots</li>
      <li>acai</li>
      <li>blueberry</li>
      <li>bananas</li>
      <li>cherry</li>
      <li>coconut</li>
      <li>donut</li>
      <li>durean</li>

    </ul>
  </div>

  <div style="clear:both"></div>


  <div class="col-lg-12 col col2">

    <h2> My List 2 </h2>

    <ul class="navList">
      <li>apples</li>
      <li>apricots</li>
      <li>acai</li>
      <li>blueberry</li>
 
      <li>donut</li>
      <li>durean</li>

    </ul>

    <ul class="navList">
      <li>apples</li>
      <li>apricots</li>
      <li>acai</li>
      <li>blueberry</li>

      <li>donut</li>
      <li>durean</li>

    </ul>

    <ul class="navList">
      <li>apples</li>
      <li>apricots</li>
      <li>acai</li>
  
      <li>donut</li>
      <li>durean</li>

    </ul>

  </div>
  <div style="clear:both"></div>
  <div class="col-lg-12 col col3">

    <h2> My List 3 </h2>

    <ul class="navList">
      <li>apples</li>
      <li>apricots</li>

      <li>cherry</li>
      <li>coconut</li>
      <li>donut</li>
      <li>durean</li>

    </ul>

    <ul class="navList">
      <li>apples</li>
      <li>apricots</li>
      <li>acai</li>
   
      <li>coconut</li>
      <li>donut</li>
      <li>durean</li>

    </ul>

    <ul class="navList">
      <li>apples</li>
      <li>apricots</li>

      <li>cherry</li>
      <li>coconut</li>
      <li>donut</li>
      <li>durean</li>

    </ul>

  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我创造了一个小提琴。迭代每个列表集合并检查列表中是否有任何列表项可见。基于此，我们可以隐藏并显示特定的部分。

     $(".myList").each(function(){
       var anyResult = false;
       $(this).find('.navList li').each(function(){
            if ( $(this).is(":visible") ) {
              anyResult = true;
              return;
            }
        });
       if(!anyResult) {
         $(this).hide();
       }
     });

添加myList作为无序列表的父类

https://jsfiddle.net/qzszsg4s/

更新了小提琴 https://jsfiddle.net/qzszsg4s/1/