我有以下列表
<ul id="fromList">
<li class="header">-ABC-</li>
<li class="item">123</li>
<li class="item">258</li>
<li class="item">189</li>
<li class="item">545</li>
<li class="header">-CDE-</li>
<li class="item">789</li>
<li class="item">215</li>
<li class="item">897</li>
<li class="item">999</li>
<li class="header">-EFG-</li>
<li class="item">701</li>
<li class="item">566</li>
<li class="item">511</li>
</ul>
搜索该项目时,应显示列表项标题
例如,当我正在搜索’9′
应该显示
> -ABC-
> 189
> -CDE-
> 789
> 897
> 999
现在我只得到搜索列表：
function filter(element) {
var value = $(element).val();
$("#fromList li").each(function() {
if ($(this).text().search(new RegExp(value,"i")) > -1) {
$(this).show();
} else {
$(this).hide();
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type='text' id='txtList' onkeyup="filter(this)" /> <ul id="fromList"> <li class="header">ABC</li> <li class="item">123</li> <li class="item">258</li> <li class="item">189</li> <li class="item">545</li> <li class="header">CDE</li> <li class="item">789</li> <li class="item">215</li> <li class="item">897</li> <li class="item">999</li> <li class="header">E</li> <li class="item">701</li> <li class="item">566</li> <li class="item">511</li> </ul>
解决方法
您可以将
.prevAll() method与
.first() method组合,以便选择应显示的li的标题元素：
$(this).prevAll('.header').first().show();
function filter(element) {
var value = $(element).val();
$("#fromList li").each(function () {
if ($(this).text().search(value) > -1) {
$(this).show();
$(this).prevAll('.header').first().show();
} else {
$(this).hide();
}
});
}
我建议使用unobtrusive JavaScript.我也缩短了你的代码一点.
$('#txtList').on('keyup',function () {
var value = this.value;
$('#fromList li').hide().each(function () {
if ($(this).text().search(value) > -1) {
$(this).prevAll('.header').first().add(this).show();
}
});
});
作为附注,如果要排除标题被选中,如果您要输入类似“ABC”,只需使用.not()方法来从选择中取消.header元素：
if ($(this).not('.header').text().search(value) > -1) {
// ..
}
