我正在努力使用 jQuery 实时搜索。
首先,使用以下代码进行实时搜索更新是有效的。
//live search function
function live_search(list) {
$("#search")
.change( function () {
//getting search value
var searchtext = $(this).val();
if(searchtext) {
//finding If content matches with searck keyword
$matches = $(list).find('a:Contains(' + searchtext + ')').parent();
//hiding non matching lists
$('li', list).not($matches).slideUp();
//showing matching lists
$matches.slideDown();
} else {
//if search keyword is empty then display all the lists
$(list).find("li").slideDown(200);
}
return false;
})
.keyup( function () {
$(this).change();
});
}
问题是我的列表是按字母顺序排列的,并且包含每个字母的标题:
<ul class="begrippen_list leftList col-sm-12 col-md-6">
<li class="header a">A</li>
<li class="a">
<a href="#">All</a>
</li>
<li class="a">
<a href="#">Auto</a>
</li>
<li class="header b">B</li>
<li class="b">
<a href="#">Balls</a>
</li>
<li class="b">
<a href="#">Bus</a>
</li>
</ul>
现在问题是:当我在输入中键入 au 时,jQuery 只显示带有“Auto”的列表项,但我还希望显示带有 a 类(li 类)的标题。当我只输入 a 时,必须显示类“a”和类“b”的标题。
我认为检查其类的所有 $matches 并显示带有 $matches 类的 li.header 可能是解决方案,但无法使其工作。
干杯!
最佳答案
向上滑动时可以遍历找到$matches
的'header'元素并排除。
var $header = $matches.prevAll('li.header');
//hiding non matching lists excluding matches heare
$('li', list).not($matches).not($header).slideUp();
关于javascript - jQuery/Javascript 获取多个元素的类以显示具有该类的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30963175/