javascripthtmllistjs

Proper Nested Search using Javascript


I am using list.js to search, sort and filter my menu items. I am having a problem using search function upon nested <ul>'s and couldn't avoid it.

The problem is when I search for a text in sub <ul> element, it returns the whole <li>'s in the sub <ul>.

Is there anything I am missing?

JSFiddle: https://jsfiddle.net/7ukgqmsp/

Here is a sample code;

  var options = {
      valueNames: ['demo-class']
  };
  var userList = new List('test', options);
<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.2.0/list.min.js"></script>
<div id="test">
  <input class="search" placeholder="Search" />
  <ul class="list">
    <li>
      <a class="demo-class" href="#" title="1">1</a>
    </li>
    <li>
      <a class="demo-class" href="#" title="2">2</a>
    </li>
    <ul class="list">
      <li>
        <a class="demo-class" href="#" title="3">3</a>
      </li>
      <li>
        <a class="demo-class" href="#" title="4">4</a>
      </li>
      <li>
        <a class="demo-class" href="#" title="5">5</a>
      </li>
      <li>
        <a class="demo-class" href="#" title="6">6</a>
      </li>
    </ul>
    <li>
      <a class="demo-class" href="#" title="7">7</a>
    </li>
  </ul>
</div>


Solution

  • As @Sam and @David stated, it was a library issue.

    If someone is using or wants to use this library with nested functionality, it's avaliable under project's GitHub page.

    Github - List.js with nested functionality

    An example usage;

    $(function() {
      var options = {
        valueNames: ['searchable'],
        item: '<li><a class="searchable" href="#"></a></li>',
        nestedSearch: true
      };
      var userList = new List('users', options);
    })
    <div class="service-list">
    <div id="users">
      <input class="search" placeholder="Search" />
      <dl class="accordion" data-accordion>
        <dd>
          <div id="panel1" class="content">
            <ul class="list first-level">
              <li>
                <a href="#" class="searchable link-first-level">Card Services Summary</a>
                <ul class="list">
                  <li>
                    <a class="searchable" href="#">Permanent Access Card</a>
                    <ul class="list last-level">
                      <li><a class="searchable" href="#">Apply for new</a></li>
                      <li><a class="searchable" href="#">Apply for replacement</a></li>
                      <li><a class="searchable" href="#">Cancel current</a></li>
                    </ul>
                  </li>
                  <li>
                    <a class="searchable" href="#">Permanent Identity Card</a>
                    <ul class="list last-level">
                      <li><a class="searchable" href="#">Apply for new</a></li>
                      <li><a class="searchable" href="#">Apply for replacement</a></li>
                      <li><a class="searchable" href="#">Cancel current</a></li>
                    </ul>
                  <li>
                    <a class="searchable" href="#">Temporary Access Card</a>
                    <ul class="list last-level">
                      <li><a class="searchable" href="#">Apply for new</a></li>
                      <li><a class="searchable" href="#">Apply for replacement</a></li>
                      <li><a class="searchable" href="#">Cancel current</a></li>
                    </ul>
                  <li>
                    <a class="searchable" href="#">Free Zone Card</a>
                    <ul class="list last-level">
                      <li><a class="searchable" href="#">Apply for new</a></li>
                      <li><a class="searchable" href="#">Apply for duplicate</a></li>
                      <li><a class="searchable" href="#">Apply for replacement</a></li>
                      <li><a class="searchable" href="#">Amend current</a></li>
                      <li><a class="searchable" href="#">Cancel current</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </dd>
      </dl>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://raw.githubusercontent.com/bilalfastian/list.js/feature/nested-search/dist/list.min.js"></script>