List.js 找到元素但仍然保留其他元素

Question

这是我第一次使用 List.js。我有以下结构：

var options = {
    valueNames: ['name']
};

var coursesList = new List('courses-list', options);

coursesList.on('updated', function(list) {
    console.info(list.matchingItems);
    if (list.matchingItems.length > 0) {
        $('.no-result').hide()
    } else {
        $('.no-result').show()
    }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<div id="courses-list">
 <input class="search">
  <div id="collectionView" class="list">
    <div class="row1">
     <div class="large-6 small-12 columns" >
      <a href="link/to/somewhere" target="_blank">
       <span class="name">Demokurs Französisch A2 Online</span>
       <p class="description">blabla</p>
     </a>
    </div>
    <div class="large-6 small-12 columns" >
     <a href="link/to/somewhere" target="_blank">
      <span class="name">Französisch</span>
      <p class="description">blabla</p>
     </a>
    </div>
   </div>
    <div class="row2">
     <div class="large-6 small-12 columns" >
      <a href="link/to/somewhere" target="_blank">
       <span class="name">Kurs A</span>
       <p class="description">blabla</p>
     </a>
    </div>
    <div class="large-6 small-12 columns" >
     <a href="link/to/somewhere" target="_blank">
      <span class="name">Kurs B<span>
      <p class="description">blabla</p>
     </a>
    </div>
   </div>
</div>
</div>

现在，如果我搜索术语A2，它会正确显示row1 中第一个div 的内容但 以及第二个div 及其所有内容。 List.js 根据需要隐藏row2。

如何让它同时隐藏所有其他 div？

我还检查了是否真的只有匹配：

coursesList.on('updated', function(list) {
    console.info(list.matchingItems);
    if (list.matchingItems.length > 0) {
        $('.no-result').hide()
    } else {
        $('.no-result').show()
    }
})

日志显示list.matchingItems 仅找到对象。

Answer 1

List.js 并非设计为以这种方式工作，它 doesn't support nested lists，它仅将列表项向下计数 1 级，因此它将整个 <div class="row1"> 视为单个列表项，<div class="row2"> 视为另一个。

如果您希望它正常工作，我建议删除<div class="row1"> 和<div class="row2">，以便所有相关的<div> 处于同一级别。如下图：

var options = {
    valueNames: ['name']
};

var coursesList = new List('courses-list', options);

coursesList.on('updated', function(list) {
    console.info(list.matchingItems);
    if (list.matchingItems.length > 0) {
        $('.no-result').hide()
    } else {
        $('.no-result').show()
    }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<div id="courses-list">
  <input class="search">
  <div id="collectionView" class="list">
      <div class="large-6 small-12 columns">
        <a href="link/to/somewhere" target="_blank">
          <span class="name">Demokurs Französisch A2 Online</span>
          <p class="description">blabla</p>
        </a>
      </div>
      <div class="large-6 small-12 columns">
        <a href="link/to/somewhere" target="_blank">
          <span class="name">Französisch</span>
          <p class="description">blabla</p>
        </a>
      </div>
      <div class="large-6 small-12 columns">
        <a href="link/to/somewhere" target="_blank">
          <span class="name">Kurs A</span>
          <p class="description">blabla</p>
        </a>
      </div>
      <div class="large-6 small-12 columns">
        <a href="link/to/somewhere" target="_blank">
          <span class="name">Kurs B</span>
          <p class="description">blabla</p>
        </a>
      </div>
  </div>
</div>

如果你绝对需要嵌套列表，那么你应该使用 jQuery，in a similar way to this question 而不是使用 List.js。