Список фильтрации jQuery, не скрывая родителей

Question

У меня есть такой список:

<ul>
  <li class="folder">Foder A</li>
  <ul>
    <li>Item 1A</li>
    <li>Item 2A</li>
    <li>Item 3A</li>     
  </ul>
  <li class="folder">Foder B</li>
  <ul>
    <li class="folder">Sub-Foder C</li>
    <ul>
      <li>Item 1C</li>
    </ul>
    <li>Item 1B</li>
    <li>Item 2B</li>
    <li>Item 3B</li>     
  </ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

А вот этот "поисковый" скрипт:

$(document).ready(function() {
$("input[type='search']").keyup(function() {
  var filter = $(this).val();
  $("ul li").each(function() {
    if ($(this).text().search(new RegExp(filter, "i")) < 0) {
      $(this).hide();
      }
    else {
      $(this).show();
      }
    });
  });
});

Но он фильтрует все <li>s и, конечно, скрывает даже "папки".

Как показывать родительский <li class="folder">, который содержит результаты поиска?

Answer 1

Я немного изменил ваш исходный код и думаю, что получил нужный вариант использования сейчас. Но сначала давайте кратко рассмотрим, что я изменил.

1. Вместо итерации по всем li элементам на каждом keyup, я использовал $('ul li').toArray(), чтобы получить массив NodeElements, когда документ готов.
2. Изначально мы скрываем все на keyup
3. Как видите, я использовал немного другой подход для фильтрации сопоставленных значений. Поскольку мой список теперь является массивом, я использую функцию filter ( MDN ), которая будет возвращать новый массив на основе NodeElements, которые соответствуют условию entry.innerText.includes(value) ( MDN - String .includes ).
4. После этого я перебираю массив результатов и применяю show() к каждой записи, а также использую parentsUntil('.top-level') (я добавил класс top-level к самому верхнему элементу <ul>), чтобы получить предков моя текущая запись (та, которая соответствует поиску), и я нацеливаюсь на непосредственно предшествующий элемент li этих предков, используя prev(...) ( jQuery docs ). Наконец я применяю show(...) к этим элементам.

Точное определение parentsUntil(...) определяется следующим образом:

Получить предков каждого элемента в текущем наборе совпадающих элементов, но не включая элемент, сопоставленный селектором, узлом DOM или объектом jQuery.

Источник

SNIPPET

$(document).ready(function() {
  var list = $('ul li').toArray();

  $("input[type='search']").keyup(function() {
    $('ul li').hide();
    var value = $(this).val();

    var result = list.filter(function(entry) {
      return entry.innerText.includes(value);
    });

    result.forEach(function(entry) {
      $(entry).show().parentsUntil('.top-level').prev('li').show();
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="search" />
<ul class="top-level">
  <li class="folder">Foder A</li>
  <ul>
    <li>Item 1A</li>
    <li>Item 2A</li>
    <li>Item 3A</li>
  </ul>
  <li class="folder">Foder B</li>
  <ul>
    <li class="folder">Sub-Foder C</li>
    <ul>
      <li>Item 1C</li>
    </ul>
    <li>Item 1B</li>
    <li>Item 2B</li>
    <li>Item 3B</li>
  </ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>