使用jQuery过滤多个列表

我在一个页面上有多个列表（多个类别的产品），如下所示：

Category 1
 
 
item1
 
item2
 
item3
 
 
Category 2
 
 
item27
 
item28
  

列表的数量是可变的。

我想在这里的演示页面上找到一个filterhttp://static.railstips.org/orderedlist/demos/quicksilverjs/jquery.html 。

但它应该搜索不同的列表。

如果用户搜索“2”，则结果应为：

 
Category 1
 
 
item2
 
 
Category 2
 
 
item27
 
item28
  

如果他搜索“1”那么它应该是（不显示没有结果的列表的h3标题）：

 
Category 1
 
 
item1
  

有人能帮我吗？

提前致谢！

Answer 1

这样的事情怎么样：

HTML

  
 
item1
 
item2
 
item3
 
 
 
item27
 
item28
  

JS

 $(function(){ $('input[type="text"]').keyup(function(){ var searchText = $(this).val(); $('ul > li').each(function(){ var currentLiText = $(this).text(), showCurrentLi = currentLiText.indexOf(searchText) !== -1; $(this).toggle(showCurrentLi); }); }); }); 

http://jsfiddle.net/EFTZR/146/

使用filter（）的另一个解决方案，如下所述：

 $('input[type="text"]').keyup(function(){ var that = this, $allListElements = $('ul > li'); var $matchingListElements = $allListElements.filter(function(i, li){ var listItemText = $(li).text().toUpperCase(), searchText = that.value.toUpperCase(); return ~listItemText.indexOf(searchText); }); $allListElements.hide(); $matchingListElements.show(); }); 

http://jsfiddle.net/EFTZR/441/

Answer 2

您可以使用jQuery中的filter方法执行此操作：

 var valueToSearch = "item1"; // this one should come from the search box var allListItems = $("ul > li"); var filteredItems = allListItems.filter(function(index) { var listItemValue = $(this).text(); var hasText = listItemValue.indexOf(valueToSearch) > -1; return hasText; }); 

接下来，您可以使用for循环在列表中的filteredItems变量中显示值或类似的值。