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中的更改

用

包装所有文本（包括子菜单项）

Boolean

JS的变化

并简单地将childSelector的值更改为“span”

<span>text_here</span>

Answer 2

我的问题解决了<span class="menu-text"> menu1 </span>

中的所有文字

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

2 个答案: