テーブルフィルターを解読する

jQuery quickSearch plug-in

http://phpjavascriptroom.com/?t=ajax&p=jquery_plugin_tablesort

今日は、このjQueryPluginを解読する。

というかこれ、古いな。
あとから検索してみたら、これが最新？
https://github.com/riklomas/quicksearch

ソースが全然違うので、別物ぽいけど。

プラグイン利用の際に書くソース

$(function () {
 //どこに検索フォームを設置するか
 $('table#table_exp tbody tr').quicksearch({
 	//attachedで指定したテーブルを基準にして
 	//どこに検索フォームを配置するか
    position: 'before',
    
    //検索テーブル
    attached: 'table#table_exp',
    
    //表のストライプclass指定
    stripeRowClass: ['odd', 'even'],
    
    //検索ボックスのラベル
    labelText: 'データ検索：'
 });

});

半角スペースでand条件検索できます。

引数

■position

prepend：attached指定要素の先頭に配置
http://semooh.jp/jquery/api/manipulation/prepend/content/

before:attached指定要素の前に配置
http://semooh.jp/jquery/api/manipulation/before/content/

append:attached指定要素の末尾に配置
http://semooh.jp/jquery/api/manipulation/append/content/

■loadertext
処理の際に表示するテキスト。
指定しなければ、初期値で「loading...」が入る。

「loaderImg」引数で画像も指定できる。

ロード時に、form生成

検索フォームが生成されます。

keydownイベント

キーコード
http://faq.creasus.net/04/0131/CharCode.html

下記が、入力されたとき動作させないように判定している。

■引っかかる部分
・↑↓は、入力フィールドが１行のみだから不要？
　→←も必要ない気がするんだけども。。。うーむ。

・224:全角がダメなら223:半角もダメなのでは？謎

9:Tabキー
13:Enter / T Enter
16:Shift
17:Ctrl
18:Alt
38:↑
40:↓
224:全角

if (!(keycode === 9 || keycode === 13 || keycode === 16 || keycode === 17 || keycode === 18 || keycode === 38 || keycode === 40 || keycode === 224)){
	qs();
}

入力値のタグ削除

汎用的に使えそう
※半角に変換する部分は、参考に。

function strip_html(input)
{
	var regexp = new RegExp(/\<[^\<]+\>/g);
	//タグを削除
	var output = input.replace(regexp, "");
	//半角に変換
	output = $.trim(output.toLowerCase().replace(/\n/, '').replace(/\s{2,}/, ' '));
	return output;
}