Keyup使用jQuery过滤带有标头的多个列表

我正在尝试使用jQuery过滤带有标题（类别名称）的多个列表（特定类别的书籍）。 我只想过滤搜索列表中的项目（特定书籍），但不过滤标题。 如果列表为空，则标题（类别名称）应该消失。 到目前为止我的工作是过滤多个列表，但如果列表为空，则标题不会消失。 我还想从filter中排除.custom-books列表。

HTML：

 
 
 
 Custom Books
 
 
 Don't see your book in our list? Add it yourself! 
 
 
 
 
Academic
 
 
 Academic Book One 
 
 Academic Book Two 
 
 
 
 
Botany
 
 
 Botany Book One 
 
 Botany Book Two 
 
 
  

和我的jQuery：

 var $products = $('#workflow_books li ul li a') $("#search").keyup(function() { $products.show().filter(function() { return !re.test($(this).text()); }).hide(); }) 

有任何想法吗？

谢谢和高分！ 麦克风

Answer 1

 var $products = $('#workflow_books li ul:not(:first)'); $("#search").keyup(function() { var val = this.value.trim(); if(!val) $('li:hidden', '#workflow_books').show(); else { $('li:hidden', $products).show(); $('li', $products).filter(function() { var re = new RegExp(val, 'ig'); return !re.test($('a', this).text()); }).hide(); $products.each(function() { if($('li:visible', this).length == 0) $(this).parent('li').hide(); else $(this).parent('li').show(); }); } }); 

工作演示

Answer 2

在这里，这将过滤它们，忽略第一个列表，在字符串的开头。 如果您需要更具体的内容，请告诉我。

 var $products = $('#workflow_books ul:not(:first)'); $("#search").keyup(function() { var input = this.value; $products.each(function() { var $this = $(this), $matches = $this.children('li').filter(function() { return $(this).children('a').text().toLowerCase().indexOf(input) === 0; }); if($matches.length > 0) { $this.children().hide(); $this.parent().show(); $matches.show(); } else { $this.parent().hide(); } }); })​;​