0

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>

4

3 に答える 3

2

残念ながら、ネストされたリストの検索は現在 list.js ではサポートされていないようです ( Github issueを参照)。

ただし、ネストされたリストに別のクラスを与え、別の List.js を作成して再帰的に検索することで、カスタム ソリューションを作成できますか?

于 2016-09-26T10:48:44.167 に答える
1

@Sam と @David が述べたように、これはライブラリの問題でした。

誰かがネストされた機能でこのライブラリを使用している、または使用したい場合は、プロジェクトの GitHub ページで利用できます。

Github - ネストされた機能を持つ List.js

使用例;

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

于 2016-09-26T14:33:38.327 に答える
1

ここに画像の説明を入力

この種の機能はまだ実装されていないようです。また、作成者はそれを追加する予定もありません。

独自の生の 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();
        }

    }); });
于 2016-09-26T10:56:11.600 に答える