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

2023年7月25日 203次阅读

这是我第一次使用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,它会正确显示第1行中第一个dd的内容,但也是第二个包含所有内容的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仅查找对象.

最佳答案 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.

点赞