jQuery検索フィルターのカスタマイズが必要

Question

jQueryで検索リストフィルターを作成しました。私はそれをカスタマイズするためにいくつかの助けが必要です。

私は3つの別々のdivを持っており、div内には検索結果のリスト要素があります。

検索結果がdivと一致しない場合、他のdivを非表示にしたいと思います。下のスクリーンショットをチェックしてください - ここで

screenshot

は完全なコード例である -
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

私はバイオリンを作成しました。リストのすべてのコレクションを繰り返し処理し、そのリストにリスト項目が表示されているかどうかを確認します。それに基づいて、私たちは特定のセクションを隠して表示することができます。順不同リスト

https://jsfiddle.net/qzszsg4s/

の親のクラスとして

 $(".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/1/