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"的内容而不想选择标题,只需使用该.not()方法否定.header选择中的元素:

更新的示例

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