当使用搜索/筛选并且在jQuery中找不到结果时，如何将标题隐藏在列表之外

Question

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

例如，如果未找到书籍，则隐藏书籍章节标题//如果未找到日记账，则隐藏日记账章节标题。

图书章节标题

2008书籍DVX

2007第400册DVD

2006年第400册DVX

日记账部分标题

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

我有下面的jsfiddle来展示这个问题。正如您所看到的，搜索后标题仍然保留在空列表上方。如果搜索中没有显示任何项目，我想删除标题。

带有ul标签外标题的Js文件夹列表

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>