JavaScript
list.js

List.jsで検索にhitした件数をHTMLに表示する

この記事の概要

list.jsを使ってテーブルをインクリメンタルサーチをしたときの検索数を表示するサンプルです

使ったもの

List.js http://listjs.com/
jQuery(必須ではないです)

本文

まずはテストデータ

list.jsの本家からサンプルを頂戴する。

http://listjs.com/examples/table/

<div id="users">
  <input class="search" placeholder="Search" />
  <button class="sort" data-sort="name">
    Sort by name
  </button>
  <table>
    <!-- IMPORTANT, class="list" have to be at tbody -->
    <tbody class="list">
      <tr>
        <td class="name">Jonny Stromberg</td>
        <td class="born">1986</td>
      </tr>
      <tr>
        <td class="name">Jonas Arnklint</td>
        <td class="born">1985</td>
      </tr>
      <tr>
        <td class="name">Martina Elm</td>
        <td class="born">1986</td>
      </tr>
      <tr>
        <td class="name">Gustaf Lindqvist</td>
        <td class="born">1983</td>
      </tr>
    </tbody>
  </table>

</div>
<script src="//listjs.com/assets/javascripts/list.min.js"></script>

スクリプトを書く

インクリメンタルサーチするフィールドを定義する。これもサンプルのまま。

var options = {
  valueNames: [ 'name', 'born' ]
};

var userList = new List('users', options);

これで、1つのテキストフィールでテーブル内のnameとbornの値でフィルタするところまでは完成。

スクリプトを改良する

先ほど作ったスクリプトに、本家のlist apiページにある on(event, callback) を追加する。第一引数のeventはlist.jsで定義されている文字列で、以下の中から選べる。

  • updated
  • searchStart
  • searchComplete
  • filterStart
  • filterComplete
  • sortStart
  • sortComplete

今回はsearchComplete(検索完了時のイベント)を仕込んでみた。

userList.on('searchComplete', function(a){
  $("#hits").html(a.matchingItems.length);
 });

これで、テキストボックスに文字を入れたり消したりしたときに、#hitsの値がこりこりと変わる。コールバックの中でHTMLを書き換えてるので、HTMLどこかにhitsの表示エリアを作っておく必要がある。

ページ表示したときに、全件の件数が出ないのが気に入らなかったので、以下も追加してみた。

$("#hits").html(userList.size);

ということで、全体としては、こんな感じでしょうか。

<span id="hits"></span><!--ここ追加。検索数が表示されるところ-->
<div id="users">
  <input class="search" placeholder="Search" />
  <button class="sort" data-sort="name">
    Sort by name
  </button>
  <table>
    <!-- IMPORTANT, class="list" have to be at tbody -->
    <tbody class="list">
      <tr>
        <td class="name">Jonny Stromberg</td>
        <td class="born">1986</td>
      </tr>
      <tr>
        <td class="name">Jonas Arnklint</td>
        <td class="born">1985</td>
      </tr>
      <tr>
        <td class="name">Martina Elm</td>
        <td class="born">1986</td>
      </tr>
      <tr>
        <td class="name">Gustaf Lindqvist</td>
        <td class="born">1983</td>
      </tr>
    </tbody>
  </table>

</div>
<script src="//listjs.com/assets/javascripts/list.min.js"></script>

<script>
var options = {
  valueNames: [ 'name', 'born' ]
};

var userList = new List('users', options);

//これ以降、サンプルに追加した部分
userList.on('searchComplete', function(a){
  $("#hits").html(a.matchingItems.length);
 });

$("#hits").html(userList.size);
</script>