Фильтр поиска jQuery показывает заголовок элемента списка

У меня есть следующий список

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

Ответ 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) {
    // ..
}

Ответ 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();
        }
    });
});