正確的嵌套搜索使用Javascript

Question

我正在使用list.js搜索，排序和篩選我的菜單項。我在嵌套<ul>時遇到了使用搜索功能的問題，無法避免它。

問題是，當我搜索<ul>元素中的文本時，它會返回整個<li>的子<ul>。

有什麼我失蹤？

的jsfiddle：https://jsfiddle.net/7ukgqmsp/

這裏是一個示例的代碼;

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>

Answer 1

由於@Sam和@David聲明，這是一個圖書館問題。

如果有人正在使用或想要使用這個嵌套功能的庫，它可以在項目的GitHub頁面下使用。

Github - List.js with nested functionality

一個例子使用;

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

Answer 2

不幸的是它會出現在搜索嵌套的列表中沒有list.js（見the Github issue）目前支持。

但是，您可以通過爲您的嵌套列表添加另一個類來創建自定義解決方案，創建一個單獨的List.js &遞歸搜索？

Answer 3

看起來不像這種功能一直沒有實現，也不筆者有計劃添加它。

爲什麼不製作自己的原始jQuery解決方案？

$('.search-box').on('keyup', function(){ 

var searchTerm = $(this).val().toLowerCase(); 

    $('.list li').each(function(){ 

     if ($(this).filter('[data-search-term *= ' + searchTerm + ']').length > 0 || searchTerm.length < 1) { 
      $(this).show(); 
     } else { 
      $(this).hide(); 
     } 

    }); });