データを扱うテーブルなどにインクリメンタルサーチを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;i<tr.length;i++){

		// 対象にするTDのテキストを一時保存
		var itemName = $('td:nth-child(3)',tr[i]).text();

		// 2. テキストが最初の単語(value[0])を含んでいるかどうか
		// RegExpの第二引数iはアルファベットの大文字小文字を区別しない
		if(itemName.match(new RegExp(value[0]),'i')){

			// 表示しておく(前回の検索結果で非表示の場合もあるので)
			$(tr[i]).show();

			// 4. さらに単語が2つ以上入力されている場合
			if(value.length>1){

				// 4. 2つ目以降の単語が含まれていなければ順番に非表示にしていく
				for(var j=1;j<value.length;j++){
					// 5. マッチングで検索してfalseなら非表示
					if(!itemName.match(new RegExp(value[j]),'i')){
						$(tr[i]).hide();
					}
				}
			}
		// 3. 含んでいない場合は非表示にする
		}else{
			$(tr[i]).hide();
		}
	}
});

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