JavaScriptを使用したネストされた適切な検索

Question

私はlist.jsを使用してメニュー項目を検索、並べ替え、フィルタリングしています。私は<ul>の入れ子になった時に検索機能を使用することに問題があり、それを避けることができませんでした。

問題は、サブ<ul>要素のテキストを検索すると、サブ<ul>に<li>の全体を返します。

紛失しているものはありますか？

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

残念ながら、（the Github issueを参照してください）ネストされたリストを検索すると、現在list.jsではサポートされていないように思われます。

ただし、ネストされたリストに別のクラスを与えて別の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(); 
     } 

    }); });