使用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>