如何在jQuery中使用搜索/筛选而未找到结果时将标题隐藏在列表之外？

Question

在搜索完成后，我很难弄清楚如何从下面的列表中删除标题。如果在ul容器(斑马列表)中没有结果，我想删除它前面的标题。

例如，如果没有找到任何书籍，那么图书部分的标题是隐藏的//如果没有找到期刊，那么日志部分的标题是隐藏的。

Book Section Title 2008图书DVX2007图书400 DVX 2006图书400 DVX Journal Section Title 2005 Journal DS 650 2004日刊DS 650 2003日刊DS 650 2002年日刊DS 650

$(document).ready(function(){
    $('#txtList').on('keyup', function () {
        var value = this.value;
        $('.zebra-list li').hide().each(function () {
            if ($(this).text().search(value) > -1) {
                $(this).prevAll('.header').first().add(this).show();
            }
        });
    });
});

我有下面的小提琴手来说明问题。如您所见，在搜索空列表之后，标题仍然保留。如果搜索中没有显示项目，我想删除标题。

Js FIddle列表中包含ul标记外的标题

Answer 1

我会这样做(以下js中的评论)：

​

 $(document).ready(function() {
   var allLi = $('.zebra-list li'),
     headings = $('.small-heading');   // cache vars for better performance

   $('#txtList').on('keyup', function() {
     var value = this.value;

     headings.hide(); // hide everything on keyup
     allLi.hide().each(function() {
       var li = $(this);
       if (li.text().search(value) > -1) {
         li.show();  // show current li
         li.parent().prev('.small-heading').show();  // show current li  heading (which is the previous small-heading of the parent ul)
       }
     });
   });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='txtList' />
<h6 class="attention
 small-heading"><i class="fa fa-caret-down" style="color:#666;"> </i>
 Book Section Title</h6> 
<ul class="zebra-list fitment-padding">
  <li>2008 Book DVX</li>
  <li>2007 Book 400 DVX</li>
  <li>2006 Book 400 DVX</li>
</ul>
<h6 class="attention small-heading"><i class="fa fa-caret-down" style="color:#666;"> </i> Journal Section Title</h6> 
<ul class="zebra-list fitment-padding">
  <li>2005 Journal DS 650</li>
  <li>2004 Journal DS 650</li>
  <li>2003 Journal DS 650</li>
  <li>2002 Journal DS 650</li>
</ul>

​