如何使用jQuery搜索嵌套列表？

我已经将一个简单的搜索字段放在一起查看列表，但我有嵌套列表，它仅限于单个级别列表 – 如何修改

我把它放在一个小提琴里; http://jsfiddle.net/marksweb/4CJMe/

我需要对if(filter)做什么才能检查嵌套项，如果结果存在则不隐藏嵌套列表的子项？

演示现场; http://dl.dropbox.com/u/3755926/cssTricks/main.html

 (function ($) { // custom css expression for a case-insensitive contains() jQuery.expr[':'].Contains = function(a,i,m){ return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0; }; function searchList(header, list) { // header is any element, list is an unordered list // create and add the filter form to the header var form = $("
").attr({"class":"filterform","action":"#"}), input = $("").attr({"class":"filterinput","type":"text"}); $(form).append(input).prependTo(header); $(input) .change( function () { var filter = $(this).val(); if(filter) { // this finds all links in a list that contain the input, // and hide the ones not containing the input while showing the ones that do $(list).find("a:not(:Contains(" + filter + "))").parent().slideUp(); $(list).find("a:Contains(" + filter + ")").parent().slideDown(); } else { // return to default $(list).find("li").slideDown(); } return false; }) .keyup( function () { // fire the above change event after every letter $(this).change(); }); } //ondomready $(function () { searchList($("#main"), $("#contents-list")); }); }(jQuery)); 

Answer 1

搜索有效，但仅在文本框失去焦点或输入时才会按下。

更改以下行：

 $(input).change(function(){ 

至：

 $(input).keyup(function(){ 

并且function似乎开始正常工作。

我还注意到contains修改没有执行不区分大小写的搜索，因此修改以下行也应该解决这个问题：

 var hasMatch = searchTerms.length == 0 || $(this).text().toLowerCase().indexOf(searchTerms.toLowerCase()) > 0; 

这是更新的jsFiddle 。

Answer 2

本教程中的示例非常好，但它对我的嵌套列表不起作用。 我根据示例创建了一个不同的代码，它运行得很好。

例如。 列表（HTML代码）：

  
Search words    
 
 
1 
 
12 
 
23 
 
33
 
31
 
35
 
 
 
 
 
14 
 
23 
 
34
 
36
 
 
 
24 
 
32
 
34
 
 
 
 
 
 
 
2
  

这是jquery代码：

  (function ($) { // custom css expression for a case-insensitive contains() jQuery.expr[":"].contains = jQuery.expr.createPseudo(function (arg) { return function (elem) { return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0; }; }); // this function calls itself, to search in every level function hasChild(list) { // the searched value var filter = $('#filterinput').val(); // for every children, do function: list.children('li').each(function () { // see if the list contains the filter // if you don't want to use span, you can write the following function: //find("a:contains(" + filter + ")") if ($(this).find("span > a:contains(" + filter + ")").length > 0) { // see if it has nested levels if ($(this).find('ul :first').length > 0) { $(this).show(); // recall function hasChild($(this).find('ul :first').parent()); } else { $(this).show(); } } else { $(this).hide(); } }); }; $('#filterinput').keyup(function () { // the id of the filtered list var list = '#list'; // the searched value var filter = $('#filterinput').val(); if (filter) { // call previous function hasChild($(list)); } else { // show all $(list).find("li").show(); } return false; }); }(jQuery)); 

Answer 3

我已经设法解决了我的问题。

我尝试访问我的列表的最初问题是我无法在导出的HTML中使用类选择器来存在现有内容，因此我必须添加自定义ID并使用searchList($("#main"), $("#contents-list")); 哪个成功了。

然后，要访问嵌套列表项，我必须从和

获取filter级别，如我在此处的问题中所示，以访问

并默认为

因此最终filter看起来像这样;

  if(filter) { // this finds all links in a list that contain the input, // and hide the ones not containing the input while showing the ones that do $(list).find("li:not(:Contains(" + filter + "))").parent().slideUp(); $(list).find("li:Contains(" + filter + ")").parent().slideDown(); } else { // return to default $(list).find("ul").slideDown(); } return false; })