インターネットの世界では素早さを求める動きが強まっている。それこそ、サイト内検索で欲しい情報が見つからなかったり、レスポンスが遅れたりすればあっという間にユーザがいなくなってしまう。

ピクチャ 23.png

JavaScriptだけで検索を行う

 

そんな高速なサーバ検索は難しいかもしれないが、クライアントサイドであれば意外と高速化できる。

今回紹介するオープンソース・ソフトウェアはjQuery Live Search、jQueryを使ったリスト検索ライブラリだ。

jQuery Live SearchはWebページ上にあるリストを検索するライブラリだ。リアルタイムにフィルタリングが行われるのでインクリメンタル検索に近い。デモでは1,000件のリストに対してフィルタリングを行っている。

ピクチャ 24.png

文字を入力するたびに絞り込まれていく

 

レスポンスはブラウザの性能によるだろうが、思っていた以上に高速だ。検索結果の件数も表示されるので、ユーザは自由に文字を変えつつ結果を確認できる。データが1,000件程度であれば、HTML上にレンダリングしてしまい(デフォルトでは非表示でも良いだろう)、クライアントサイドで検索させてしまうのはどうだろう。

もちろん、大量のデータであれば検索しても時間がかかってしまう。JavaScriptなのでブラウザが固まったようになってしまうだろう。だがブログの件名でフィルタリングさせたり、SNSの友達をフィルタリングするような用途であれば十分使えるだろう。

 

nakajima’s jquery-livesearch at master - GitHub

 http://github.com/nakajima/jquery-livesearch/tree/master

jQuery Live Search Demo

 http://nakajima.github.com/jquery-livesearch/