javascript - 使用 JQuery Searchable 插件在菜单和子菜单中搜索 - 多级

Question

我想在菜单标题和子菜单中搜索，但在 JQuery 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',
...
...