Blog

Gmailみたいなオートコンプリートを実装する jQueryプラグイン

以前オートコンプリートに関する記事

テキストファイルで作る オートコンプリート jQueryプラグイン

を書いたが、それの強化版でインターフェイスも優れているプラグインを見つけたので使ってみた。

 

デモ1

 

Gmailの宛先入力のようなインターフェイスでオートコンプリートができるようになっている。

オプションも豊富でとても扱いやすい。

http://nicolasbize.github.com/magicsuggest/

 

例1

まずは

のような、サジェスト用のデータを用意しておく。

また、HTMLは

という感じでテキストボックスだけを用意しておく。

 

以下はそれぞれデモ1のサンプルソース。

 

オートコンプリート無し

 

オートコンプリート有り

 

右に出力

 

左に出力

 

更にオプションを使ったものがことら

 

デモ1

 

オートコンプリート無し & 3つしかキーワード選択できない

 

入力できない = 選択しかできない & 3つしかキーワード選択できない

 

出力方法をアレンジする

これはあらたに

のようなフォーマットの配列データを用意。

 

rendererにfunctionにデータが入ってくるので

項目をreturnすればよい。

 

ECサイト等商品数が多い場合はやり方によってはとても使いやすいと思った。

Author Profile

hoshino
hoshino
ECのことを中心に書きたいと思います。 ネタが無いときはプログラムやデザインのことも書きます。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ