Как скрыть пустые парены, когда дети пусты - PullRequest
Новая
       8

Как скрыть пустые парены, когда дети пусты

1 голос
/ 05 февраля 2020

Я пытаюсь построить динамическое c окно поиска для фильтрации элементов в списке - список настроен как последовательность неупорядоченных списков, каждый из которых содержит несколько элементов

Когда пользователь вводит букву в поле поиска, тогда я только хочу вернуть элементы списка, которые содержат эту букву / буквы - эта часть работает нормально

Однако у меня есть заголовки внутри каждого неупорядоченного списка, так что пока все элементы в списке скрыты, заголовок отсутствует, и я хочу скрыть заголовок / весь неупорядоченный список, если ни один из его дочерних элементов не виден

И наоборот, при изменении поля поиска неупорядоченный список должен отображаться или скрываться соответствующим образом.

HTML

<input type="text" id="search-input" name="search-fields">  

<ul class="sorted-list">
<legend>Section 1</legend>
<li class="tmenu"><span class="tmenuspan">bob</span>
<li class="tmenu"><span class="tmenuspan">fred</span>
<li class="tmenu"><span class="tmenuspan">tom</span>
</ul>

<ul class="sorted-list">
<legend>Section 2</legend>
<li class="tmenu"><span class="tmenuspan">mike</span>
<li class="tmenu"><span class="tmenuspan">john</span>
<li class="tmenu"><span class="tmenuspan">david</span>
</ul>

JS

$("#search-input").on("keyup", function () {
    var search = this.value;

    if (search !== '') {

        $('.tmenuspan').each(function() {
            if ($(this).text().toLowerCase().indexOf(search) >= 0) {
                $(this).closest('.tmenu').show();
            } else {
                $(this).closest('.tmenu').hide();
            }
        });

        $('ul.sorted-list').each(function() {
            if($('ul.sorted-list > li').is(':hidden')) {
                //$(this).closest('ul.sorted-list').hide();
            }
        });
    } else {
        $('.tmenu').show();
        $('ul.card-tabs-sorted').show();
    }

});

В приведенном выше примере, когда я печатаю bob, все элементы меню скрыты, кроме того, что содержит bob, что Мне нужно, но заголовок раздела 2 / неупорядоченный список все еще показывает - это бит, который я не могу понять.

https://jsfiddle.net/9Lw675ep/

1 Ответ

1 голос
/ 05 февраля 2020

JS

var $ul = $('.sorted-list');
var $li = $ul.find('li');

$("#search-input").on("keyup", function () {
  var inputValue = $.trim(this.value); // Trim values!
  var rgx = new RegExp(inputValue, "i"); // Case insensitive

  // LI
  $li.show().filter(function() {
    return ! rgx.test($(this).text())
  }).hide();

    // UL
  $ul.show().filter(function() {
    return ! $(this).find("li:visible").length;
  }).hide();
});

https://jsfiddle.net/n62k7hxL/

...