jQuery搜索过滤器显示列表项标题

Question

我有以下清单

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

Answer 1

你可以在结合.prevAll()方法用的.first()方法 ，以选择的头元素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();
        }
    });
}

---

我建议使用不引人注目的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”之类的内容时排除标题，请使用.header .not()方法从选择中取消.header元素：

更新的示例

if ($(this).not('.header').text().search(value) > -1) {
    // ..
}

Answer 2

或者，您可以指定使用items类对列表项进行排序，而不是使用列表中的每个项进行排序：

$('#txtList').keyup(function () {
    var value = this.value;
    $('#fromList li.item').each(function () {
        if ($(this).text().search(value) > -1) {
            $(this).show();
        } else {
            $(this).hide();
        }
    });
});