[英]Need help jQuery search filter customize
我使用jQuery創建了搜索列表過濾器。 我需要一些幫助對其進行自定義。
我有3個單獨的div,在div內,我有搜索結果的列表元素。
如果搜索結果與div不匹配,我想隱藏其他人的div。 查看下面的屏幕截圖-
這是完整的示例代碼-
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>
我制造了一個小提琴。 遍歷列表的每個集合,並檢查列表中是否有任何列表項可見。 基於此,我們可以隱藏和顯示特定部分。
$(".myList").each(function(){
var anyResult = false;
$(this).find('.navList li').each(function(){
if ( $(this).is(":visible") ) {
anyResult = true;
return;
}
});
if(!anyResult) {
$(this).hide();
}
});
將myList
添加為無序列表的父類
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.