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

この記事の概要

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

使ったもの

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

#本文
##まずはテストデータ
list.jsの本家からサンプルを頂戴する。

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