Jquery 如何在子项为空时隐藏空paren

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

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

但是，我在每个无序列表中都有标题，所以当列表中的所有项目都被隐藏时，标题不会被隐藏，如果其子项都不可见，我想隐藏标题/整个无序列表

相反，当搜索框更改时，无序列表应根据需要显示或隐藏

HTML

在上面我键入bob时，除了包含bob的项目外，所有tmenu项目都隐藏了，这是我所需要的，但第2节标题/无序列表仍然显示-这是我无法理解的部分

JS

var$ul=$（'.sorted list'）；
var$li=$ul.find（'li'）；
$（“#搜索输入”）。在（“键控”，函数（）{
var inputValue=$.trim（this.value）；//trim值！
var rgx=new RegExp（inputValue，“i”）；//不区分大小写
//李
$li.show（）.filter（函数（））{
return！rgx.test（$（this）.text（））
}).hide（）；
//保险商实验室
$ul.show（）.filter（函数（））{
return！$（this）.find（“li:visible”）.length；
}).hide（）；
});

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

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

});