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

Question

I created a search list filter with jQuery. I need some help to customize it.

I have 3 separate div's, and inside div's I have list elements for Search results.

I want to hide other's div if search result doesn't match from the div. Check screenshot below -

screenshot

Here is the full example code -
https://codepen.io/anon/pen/eGxrGR

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

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

Answer 1

I have created a fiddle. Iterating over every collection of list and checking if any list item is visible in that list or not. Based on that we can hide and show particular section.

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

Added myList as class of Parent of unordered list

https://jsfiddle.net/qzszsg4s/

Updated Fiddle https://jsfiddle.net/qzszsg4s/1/