如何使用jQuery搜索嵌套列表? [英] How do you search a nested list with jQuery?

问题描述

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

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

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

I've put it in a fiddle; http://jsfiddle.net/marksweb/4CJMe/

我需要对我的if(filter)做些什么，以便还检查嵌套项目，并且如果结果存在，则不隐藏嵌套列表的子项?

What do I need to do to my if(filter) in order to also check nested items and not hide the child of a nested list if the result is there?

演示站点； 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));

推荐答案

我已经设法解决了这个问题.

I've managed to fix my problems with this now.

我尝试访问列表的最初问题是我无法在导出的HTML中为现有内容使用类选择器，因此我不得不添加自定义ID并将其与成功运行的searchList($("#main"), $("#contents-list"));一起使用.

My initial problem with trying to access my list was that I couldn't use class selectors for existing content within my exported HTML so I had to add custom IDs and use those with searchList($("#main"), $("#contents-list")); which worked successfully.

然后要访问嵌套列表项，我必须将过滤器级别从<a>和<li>提升，如我在这里的问题所示，访问<li>并默认使用<ul>，所以最终的过滤器看上去这个;

Then to access nested list items I had to take the filter level up from <a> and <li> as seen in my question here to access the <li> and default to the <ul> so the final filter looks like this;

        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;
      })

这篇关于如何使用jQuery搜索嵌套列表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！