jQuery的搜索多維UL列表

Question

我旁邊HTML：

<input type="text" id="search" name="searchword" value="" /> 
<ul id="search_list"> 
    <li>first</li> 
    <li>second</li> 
    <li>third 
     <ul> 
      <li>aaa</li> 
      <li>bbbb 
       <ul> 
        <li>111111</li> 
        <li>22222</li> 
        <li>3333</li> 
       </ul> 
      </li> 
      <li>cccc</li> 
     </ul> 
    </li> 
</ul> 

而且我想通過輸入來搜索這個列表。 我鍵入文本輸入和<li>和<ul>的哪些不是搜索結果必須隱藏。

非常感謝你和對不起我的英語不好

Answer 1

使用KEYUP，模糊或當你想搜索和過濾發生改變依賴。

$('#search').change(function() { 
    var searchTerms = $(this).val(); 

    $('li').each(function() { 
     var hasMatch = searchTerms.length == 0 || $(this).is(':contains(' + searchTerms + ')'); 

     $(this).toggle(hasMatch); 
    }); 
}); 

編輯：使解決方案稍微冗長，使其可以更容易閱讀。

這是fiddle。