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

我已经将一个简单的搜索字段放在一起来浏览列表，但我有嵌套列表，并且它仅限于单级列表 - 如何修改

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

我需要对我的if(filter)为了还检查嵌套项目并且不隐藏嵌套列表的子项（如果结果存在）？

演示网站；http://dl.dropbox.com/u/3755926/cssTricks/main.html 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 = $("<form>").attr({"class":"filterform","action":"#"}),
        input = $("<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));

搜索有效，但仅当文本框失去焦点或按下 Enter 键时。

将以下行更改为：

$(input).change(function(){

to:

$(input).keyup(function(){

并且功能似乎开始正常工作。

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

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

这是更新的jsFiddle http://jsfiddle.net/GoranMottram/4CJMe/4/.