帶有標題的jQuery過濾器列表

Question

我有一些列表和一些標題，我想過濾列表。 我已經完成了這個部分，你可以在下面的演示鏈接中看到。但我有一些我無法弄清楚的標準。

1. 如果標題匹配的一些字符的輸入，則顯示所有繼<ul>
2. 孩子如果頭不匹配的一些字符的輸入，但在<ul>的話，則表現出一定的項目，做，也是<li>顯示頭
3. 如果以下<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（）'之類的東西進行搜索。爲了防止不斷搜索，您可以註冊所有標題並將所有子項目及其主項目連接起來。例如：

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

之後，匹配應該按照標題項目完成。幾種可能的方式，但對於例如以下工作： (Fiddle)

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

爲了得到一個不區分大小寫：

var filter = this.value.trim().toLowerCase(); 
function FilterItems(items){ 
    return items.filter(function(){ return $(this).attr('data-name').toLowerCase().indexOf(filter) > -1;}); 
} 

雖然與後一種方法，你也可以選擇存儲的所有數據值一旦進入初始化階段。