スタッフブログ

コーディングラボのスタッフから、
日々のつぶやきをお届けします。

第2回:Ajaxによるインクリメンタルサーチ

こんにちは。
今回は前回に引き続きAjaxの使用例ということで、AjaxとjQueryプラグインを使った検索ボックスをご紹介します。
検索ボックスにキーワードを入力して「検索」ボタンを押すのがよくある流れですが、1文字入力するごとに画面遷移なしで結果を返してくれるインクリメンタルサーチというものがあります。
これを使うと、せっかく入力して検索を押したのに結果なしというシーンを減らしたり、入力途中の似たようなキーワードが見られるというメリットがあるかと思います。


今回、実装には “Ajax AutoComplete for jQuery” というプラグインを使用します(jquery.autocomplete.js)。

コードはこのようになります。

キーワードを1文字入れるごとに /ajax/autoSuggest にアクセスして結果を取得し、マッチ部分の文字列にstrongタグを付けてくれます。

=================================
イメージ画像 – ECサイトのブランド検索の例

a 入力時
a 入力時


ad 入力時
ad 入力時


adam 入力時
adam 入力時

=================================

自分で書いた部分には onchange などのイベントは指定していませんが、jquery.autocomplete.js の中を見ると setinterval で時間ごとにチェックしているようです。

以上、AjaxとjQueryによるインクリメンタルサーチの実例をご紹介しました。
お読みいただきありがとうございました。