当孩子为空时如何隐藏空的父母

Question

[我正在尝试构建一个动态搜索框以过滤列表中的项目-该列表被设置为一系列无序列表，每个列表都包含许多项目

[当用户在搜索框中输入字母时，我只想返回包含该字母/字母的列表项-该部分工作正常

但是，在每个无序列表中都有标题，因此尽管隐藏了列表中的所有项目，但标题却没有，如果没有子项，则我想隐藏标题/整个无序列表

相反，当更改搜索框时，无序列表应适当显示或隐藏。

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时，所有tmenu项都被隐藏，除了包含bob的那一项是我需要的，但是第2部分的标题/无序列表仍然显示-这是我无法确定的位。

https://jsfiddle.net/9Lw675ep/

Answer 1

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