Keyup jQuery로 헤더가있는 여러 목록 필터링

Question

jQuery를 사용하여 키 업 헤더 (카테고리 이름)가있는 여러 목록 (특정 카테고리의 책)을 필터링하려고합니다. 목록 내의 항목 (특정 서적) 만 필터링하고 헤더는 필터링하지 않습니다. 목록이 비어 있으면 머리글 (카테고리 이름)이 사라집니다. 지금까지 여러 목록을 필터링하는 작업을했지만 목록이 비어 있으면 헤더가 사라지지 않습니다. 필터에서 .custom-books 목록을 제외하고 싶습니다.

HTML :

<input type="text" id="search" /> 

<ul id="workflow_books">  
<li> 
    <h6 class="custom"> Custom Books</h6> 

    <ul> 
     <li class="custom-books"> 
      <a>Don't see your book in our list? Add it yourself!</a> 
     </li> 
    </ul> 
</li> 

<li> 
    <h6>Academic</h6> 

    <ul> 
     <li> 
      <a>Academic Book One</a> 
     </li> 

     <li> 
      <a>Academic Book Two</a> 
     </li> 
    </ul> 
</li> 

<li>   
    <h6>Botany</h6> 

    <ul> 
     <li> 
      <a>Botany Book One</a> 
     </li> 

     <li> 
      <a>Botany Book Two</a> 
     </li> 
    </ul> 
</li> 
</ul> 

내 jQuery를 :

var $products = $('#workflow_books li ul li a') 

$("#search").keyup(function() { 
    $products.show().filter(function() { 
     return !re.test($(this).text()); 
    }).hide(); 
}) 

어떤 아이디어?

감사와 하이 파이브! 마이크

Answer 1

여기까지 가면 첫 번째 목록을 무시하고 문자열의 시작 부분에서 필터링됩니다. 좀 더 구체적인 것을 필요로한다면 알려주세요.

var $products = $('#workflow_books ul:not(:first)'); 

$("#search").keyup(function() { 
    var input = this.value;  

    $products.each(function() { 
     var $this = $(this), 
      $matches = $this.children('li').filter(function() { 

       return $(this).children('a').text().toLowerCase().indexOf(input) === 0; 
      }); 

     if($matches.length > 0) { 
      $this.children().hide(); 
      $this.parent().show(); 
      $matches.show();    
     } else { 
     $this.parent().hide(); 
     } 
    }); 
})​;​ 

Answer 2

var $products = $('#workflow_books li ul:not(:first)'); 
$("#search").keyup(function() { 
    var val = this.value.trim(); 
    if(!val) $('li:hidden', '#workflow_books').show(); 
    else { 
     $('li:hidden', $products).show(); 
     $('li', $products).filter(function() { 
      var re = new RegExp(val, 'ig'); 
      return !re.test($('a', this).text()); 
     }).hide(); 
     $products.each(function() { 
      if($('li:visible', this).length == 0) $(this).parent('li').hide(); 
      else $(this).parent('li').show(); 
     }); 
    } 
}); 

Working Demo