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 但中firstdiv的内容，也是第二个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，它只计算一个级别的列表项，因此它将整个<div class="row1">看作一个列表item和<div class="row2">为另一个。

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

＆＃13;

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()
    }
})

＆＃13;

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

＆＃13;

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

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

1 个答案: