Re:インクリメンタルサーチをjQueryで実装

http://moto-mono.net/2009/07/03/incremental-search-with-jquery.html

これを自分なりに実装してみる。

ソースコード

あんまり変え過ぎるのもアレなので、全体の流れは元記事のサンプルと同じにした。

jQuery(function($) {

    // 対象のtr達
    var tr = $('tr', '#item_table tbody');

    // 入力がある度評価
    $('#incrementalSearch').keyup(function() {
        // 検索クエリ
        var query = $(this).val()
            // 前後の空白文字をトリムして、
            .replace(/^\s+|\s+$/g, '')
            // 1個以上の空白文字を半角スペースにして、
            .replace(/\s+/g, ' ')
            // 半角スペースで区切って配列化
            .split(' ');

        // 検索クエリが無ければtrを全部表示して終了
        if (query[0] === '') {
            tr.show();
            return;
        }

        // コレくらいの単純処理ならeachで回してもいいよね？いいよね！
        // しかもeachで回すと無条件にjQueryっぽくなるおまけ付き！(主観)
        tr.each(function() {
            // 現在のtr
            var self = $(this);
            // 商品名
            var itemName = $('td:nth-child(2)', self).text();
            // 検索クエリの数だけ回す
            for (var i = 0, len = query.length; i < len; i++) {
                // 検索クエリにマッチしなかったら非表示にして次のtrへ
                if (!itemName.match(new RegExp(query[i], 'i'))) {
                    self.hide();
                    return;
                }
            }
            // 検索クエリ全てにマッチしたら表示
            self.show();
        });
    });

});

変更点

検索クエリの処理

要らない部分を消してから分割。

入力文字列の前後の空白文字は要らないので消す
半角スペースの連続は空要素がモリモリ増えちゃうので一個にする
- ついでに他の空白文字(全角スペースとかタブ文字とか)も半角スペースにする
最後にモリっと分割

2番目のタイミングで、半角スペース以外の空白文字で区切っても検索出来るようになる。

対象要素をeachで回す

対象要素はjQueryオブジェクトだからeachで回したかった。それだけ＞＜

ifのネストは避けれたら避けたい

条件分岐をネストすると、たいていの場合見難くなる。

ネストを避けれそうなら避けた方がいいような気がした。

プログラミングに正解は無い

状況ごとの正解(デファクトスタンダード)はあるけど、「Aの仕様ならBのように書かなければならない」と言うのは無いと思う。

だから皆さんも気張らずにドンドン書いてドンドン公開しちゃいましょう！

公開したコードは誰かの役に立つかも知れないし、運が良ければ誰かが添削してくれるかも知れないですよ！

おまけ

OR検索の場合は多分最後を反対にすればいける。

// 検索クエリの数だけ回す
for (var i = 0, len = query.length; i < len; i++) {
    // 検索クエリにマッチしたら表示して次のtrへ
    if (itemName.match(new RegExp(query[i], 'i'))) {
        self.show();
        return;
    }
}
// 検索クエリ全てにマッチしなかったら非表示
self.hide();

JavaScript面白い。