Search in menu & submenu with JQuery Searchable plugin - multilevel

Question

I want to search in menu title and submenu, but in JQuery Searchable Plugin can't find this option. When I type characters, I can find menu but can't find submenu. Searchable plugin has childSelector option but this option is searching just the first level.

$('#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

Changes In HTML

Wrap all text (including submenu items) with

<span>text_here</span>

Changes in JS

and simply change the value of childSelector to 'span'

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