Question

我有一些列表和列表的标题，我想过滤。我已经完成了那部分，你可以在下面的演示链接中看到。但我有一些我无法弄清楚的标准。

如果标题匹配某些字符的输入，则显示<ul>
如果标题与某些字符的输入不匹配，但<ul>中的某些项目与之相符，则会显示<li>，但也会显示标题
如果标题或后面的<ul>与某些字符的输入不匹配，请隐藏以下<ul>

jQuery(function() {
    var listFilter = {
        init: function(header, list) {
            $('.filterdrp_input')
            .change( function () {
                var filter = this.value.trim();

                if(filter) {                            
                    myFilter(header);
                    myFilter(list);

                    function myFilter(selector) {
                        $(selector).find('[data-name]').hide()
                        .filter('[data-name*="'+ filter +'"]')
                        .show();    
                    }
                } 
                else {
                    $(header).find("span").show();
                    $(list).find("li").show();
                }
                return false;
            })
            .keyup( function () {           
                $(this).change();
            });

        }
    }

    listFilter.init($(".list-header"), $('.filterdrp').find('ul'));

});

<div class="filterdrp">
<input type="text" placeholder="search" class="filterdrp_input">

<h2 class="list-header">
    <span data-name="name_01">
        name_01 
    </span>
</h2>
<ul class="list">
    <li class="list__item" data-name="item_01">
        item_01
    </li>
    <li class="list__item" data-name="item_02">
        item_02
    </li>
    <li class="list__item" data-name="item_03">
        item_03
    </li>
</ul>

<h2 class="list-header">
    <span data-name="name_02">
        name_2  
    </span>
</h2>
<ul class="list">
    <li class="list__item" data-name="item_06">
        item_06
    </li>
    <li class="list__item" data-name="item_07">
        item_07
    </li>
    <li class="list__item" data-name="item_08">
        item_08
    </li>
</ul>

demo

我已经更新了我的解决方案，所以这是最后的工作示例 http://jsfiddle.net/x2oshad5/6/

Answer 1

如果html结构因此标题位于同一个容器内，那么耦合会更容易，但是最好的解决方案是搜索类似'next（）'的东西。为了防止不断搜索，您可以注册所有标题并将所有子项目以及主项目与其结合使用。例如：

SERIAL

之后，应按标题项进行匹配。几种可能的方法，但作为一个例子，以下工作： (Fiddle)

var headers = $('.list-header');
headers.each(function(){
var list = $(this).next('ul.list');
this.ChildItems = $('li[data-name]', list);
this.MainItem = $('span[data-name]', this);
this.AllItems = this.MainItem.add(this.ChildItems);

要获得不区分大小写的搜索：

var listFilter = {
    init: function() {
        var headers = $('.list-header');
        headers.each(function(){
            var list = $(this).next('ul.list');
            this.ChildItems = $('li[data-name]', list);
            this.MainItem = $('span[data-name]', this);
            this.AllItems = this.MainItem.add(this.ChildItems);
        });
        $('.filterdrp_input')
        .change( function () {
            var filter = this.value.trim();
            function FilterItems(items){
                return items.filter('[data-name*="'+ filter +'"]');
            }
            headers.each(function(){
                var itemstoshow = this.AllItems;
                if(filter.length > 0 && FilterItems(this.MainItem).length === 0){
                        var matches = FilterItems( this.ChildItems);
                    itemstoshow = matches.length===0 ? $() : matches.add(this.MainItem);
                }
                itemstoshow.show();
                this.AllItems.not(itemstoshow).hide();                    

            });      
            return false;
        })
        .keyup( function () {           
            $(this).change();
        });

    }
}

listFilter.init();

虽然采用后一种方法，您也可以选择在初始化时存储所有数据值。

带有标题的jquery过滤器列表

1 个答案: