title: How do you search a nested list with jQuery?
body: <p>I've put a simple search field together to look through a list, but I have nested lists and it is limited to a single level list - how do you modify </p>
  
  <p>I've put it in a fiddle; <a href="http://jsfiddle.net/marksweb/4CJMe/" rel="nofollow">http://jsfiddle.net/marksweb/4CJMe/</a></p>
  
  <p>What do I need to do to my <code>if(filter)</code> in order to also check nested items and not hide the child of a nested list if the result is there?</p>
  
  <p>Demo site; <a href="http://dl.dropbox.com/u/3755926/cssTricks/main.html" rel="nofollow">http://dl.dropbox.com/u/3755926/cssTricks/main.html</a></p>
  
  <pre><code>(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())&gt;=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 = $("&lt;form&gt;").attr({"class":"filterform","action":"#"}),
          input = $("&lt;input&gt;").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));
  </code></pre>