データを扱うテーブルなどにインクリメンタルサーチをjQueryを利用して実装する

返ってくる結果が膨大になりがちな検索結果(特に管理画面など)などでは、そこからさらにデータを絞り込みを行いたい場合もあるかと思います。毎回ページの遷移があったのではユーザーの負担になりがちです。

そこでjQueryを利用してインクリメンタルサーチを実装する方法をメモもかねて紹介します。

サンプル
サンプルファイルのダウンロード

テーブルのデータでインクリメンタルサーチを行う

考え方

今回は「A B C D ….」のように単語を半スペースで区切ることを前提に考えます。

考え方は簡単で、

1. 半スペースで区切られた単語を配列(value=[])に保存する。
2. まず最初の単語(value[0])が含まれているTDをmatchで検索する。
3. 含んでいない場合は親のTRを非表示にする。
4. さらに2つ目以降の単語(value[1〜x])が存在すれば
   value[1]からvalue[x]までを順番にmatchで検索する。
5. 含んでいないTDの親TRを非表示にする。

で実装できます。

スクリプト

上の項目をスクリプトで記述すると以下のようになります。
対象にする項目、テキストを変えればテーブル以外でも使えるので試してみてください。

var tr = $('tr','#item_table'); // TRを保存する

// 単語が入力される度に評価する
$('#incrementalSearch').keyup(function(){

        // 1. 入力された単語を配列に保存する
        var value = this.value.split(" ");

        // 全てのTRで処理を行う
        for(var i=0;i1){

                                // 4. 2つ目以降の単語が含まれていなければ順番に非表示にしていく
                                for(var j=1;j
            
サンプル
 サンプルファイルのダウンロード

            

              
            
            

              
何か役に立つことがあったらシェアしてみてください
              

                 
                  
                  
                
              
            
            

              
Related Entries
              

                

                  別のウィンドウ(タブ)で開くリンクをリンクテキストの後ろに追加するExternallink.js
                
                

                  プルダウンで日付を入力(選択)するイライラを解消するDateSupport.js
                
                

                  Safari独自実装のinput type=”search”のような検索窓を実装する
                
                

                  指定位置までスクロールするとレイヤーをにょきっと表示して注意を引くjQueryプラグイン m5noticeDisplay
                
                

                  入力補助でユーザーの負担を減らそう 予約語を表示するtangoHokan.js