3

ユーザーがリストにないものを検索した後に NO RESULT FOUND を表示するにはどうすればよいですか。list.jsを使用していますが、その実装方法がわかりません。

コードのどこかに JavaScript コードを追加して、テーブル リストが空のときに監視し、list.js またはより良い代替手段を使用して検索したときに結果が見つからないことを表示する方法はありますか?

ユーザーが探しているものがそこにないことをユーザーに伝える方法が必要です。

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>

4

2 に答える 2

8

これを 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

  }
});
于 2016-02-28T13:53:29.073 に答える