如何在未找到结果时使用 javascript 和 list.js 在搜索中显示 'no result found'

Question

当用户搜索了不在列表中的内容后，如何显示未找到结果。我正在使用 list.js 但我不知道如何实现它？

有没有一种方法可以在我的代码中的某处添加一个 JavaScript 代码，当 table 列表为空时可以监控并在我使用 [=29= 搜索时显示未找到的结果] 或者更好的选择？

我需要一种方法可以告诉我的用户他们正在搜索的内容不存在。

var monkeyList = new List('users', {
  valueNames: ['name', 'born'],
  page: 3,
  plugins: [ ListPagination({}) ] 
});

<div id="users">
  <input class="search" placeholder="Search" />
  <button class="sort" data-sort="name">
    Sort by name
  </button>

  <ul class="list">
    <li>
      <h3 class="name">Jonny Stromberg</h3>
      <p class="born">1986</p>
    </li>
    <li>
      <h3 class="name">Jonas Arnklint</h3>
      <p class="born">1985</p>
    </li>
    <li>
      <h3 class="name">Martina Elm</h3>
      <p class="born">1986</p>
    </li>
    <li>
      <h3 class="name">Gustaf Lindqvist</h3>
      <p class="born">1983</p>
    </li>
  </ul>
<ul class="pagination"></ul>
</div>


<script src="http://listjs.com/no-cdn/list.js"></script> 
<script src="http://listjs.com/no-cdn/list.pagination.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

Answer 1

将此添加到 HTML：

<div class="not-found" style="display:none">Not Found</div>

没有找到匹配的列表元素时显示。

附加此事件侦听器以侦听搜索框中的变化：

$('.search').on('keyup', function(event) { // Fired on 'keyup' event

  if($('.list').children().length === 0) { // Checking if list is empty

    $('.not-found').css('display', 'block'); // Display the Not Found message

  } else {

    $('.not-found').css('display', 'none'); // Hide the Not Found message

  }
});

Answer 2

您还可以像这样使用 searchComplete 回调 (v1.5.0)：

monkeyList.on('searchComplete', function (e) {

  if (e.matchingItems.length == 0) {

    // NO RESULTS
    // jquery
    $('.not-found').show();
    // vanilla
    // by classname
    document.getElementsByClassName('className')[0].style.display = "block";
    // or by ID
    document.getElementById("elementID").style.display = "block";

  } else {

    $('.not-found').hide();
    document.getElementsByClassName('className')[0].style.display = "none";
    document.getElementById("elementID").style.display = "none";

  }

});

希望对您有所帮助！

如何在未找到结果时使用 javascript 和 list.js 在搜索中显示 'no result found'

How to display 'no result found' on search when there is no result found, using javascript and list.js

html

javascript

search

listjs