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>

搜索项目时，应显示列表项标题
例如，当我正在搜索＆＃39; 9＆＃39;
它应该显示为

-ABC-
189
-CDE-
789
897
999

现在我只获得了搜索列表：

＆＃13;

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();
    }
  });
}

＆＃13;

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

＆＃13;

Answer 1

您可以将.prevAll() method与.first() method合并，以便选择应显示的li的标题元素：

$(this).prevAll('.header').first().show();

Updated Example

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。我也缩短了你的代码。

Updated Example

$('#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();
        }
    });
});

作为旁注，如果您要在＆＃34; ABC＆＃34;之类的内容中排除标题，则只需使用.not()方法否定{{1}来自选择的元素：

Updated Example

.header

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();
        }
    });
});

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

2 个答案: