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 的内容 BUT 也是第二 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.

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

List.js finds the element but still keeps others too

html

javascript

jquery

list

list.js