使用JQuery可搜索插件在菜單和子菜單中搜索-多級

Question

我想在菜單標題和子菜單中搜索，但是在JQuery Searchable Plugin中找不到此選項。 鍵入字符時，我可以找到菜單，但找不到子菜單。 Searchable plugin具有childSelector選項，但此選項僅搜索第一級。

 $('#menu-list').searchable({ searchField: '#menu-list-search', selector: 'li', childSelector: '.menu-text', show: function( elem ) { elem.slideDown(100); }, hide: function( elem ) { elem.slideUp( 100 ); } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://raw.githubusercontent.com/stidges/jquery-searchable/master/dist/jquery.searchable-1.0.0.min.js"></script> <input id="menu-list-search" placeholder="Search Menu..."> <ul id="menu-list" class="nav nav-list"> <li class=""> <a href="index.html"> <i class="menu-icon fa fa-tachometer"></i> <span class="menu-text"> menu1 </span> </a> <b class="arrow"></b> </li> <li class=""> <a href="#" class="dropdown-toggle"> <i class="menu-icon fa fa-list"></i> <span class="menu-text"> menu2 </span> <b class="arrow fa fa-angle-down"></b> </a> <b class="arrow"></b> <ul class="submenu"> <li class=""> <a href="tables.html"> <i class="menu-icon fa fa-caret-right"></i> submenu1 </a> <b class="arrow"></b> </li> <li class=""> <a href="jqgrid.html"> <i class="menu-icon fa fa-caret-right"></i> submenu2 </a> <b class="arrow"></b> </li> </ul> </li> </ul> 

Answer 1

HTML的變化

將所有文字（包括子菜單項）換行

<span>text_here</span>

JS的變化

並簡單地將childSelector的值更改為'span'

...
...
childSelector: 'span',
...
...

Answer 2

我的問題解決了，將所有文本包裝在<span class="menu-text"> menu1 </span>