即日対応可能!スグ依頼できる 基本料金0円のコーディング代行サービス「コーディングラボ」

スタッフブログ

お見積り依頼

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


今回、実装には “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によるインクリメンタルサーチの実例をご紹介しました。 お読みいただきありがとうございました。