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

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

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

デモ1

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

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

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

例1

まずは

JavaScript

var jsonData = ["a","b","c","d"];

1	var jsonData = ["a","b","c","d"];

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

また、HTMLは

XHTML

<input id="ms1" style="width:400px;" type="text" />

1	<input id="ms1" style="width:400px;" type="text" />

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

 

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

 

オートコンプリート無し

JavaScript

$( '#ms1' ).magicSuggest( { maxDropHeight: 0 });

1 2 3 4

$( '#ms1' ).magicSuggest( { maxDropHeight: 0 });

 

オートコンプリート有り

JavaScript

$( '#ms2' ).magicSuggest( { data: jsonData });

1 2 3 4

$( '#ms2' ).magicSuggest( { data: jsonData });

 

右に出力

$( '#ms3' ).magicSuggest( { data: jsonData, selectionPosition: 'right' });

1 2 3 4 5

$( '#ms3' ).magicSuggest( { data: jsonData, selectionPosition: 'right' });

 

左に出力

JavaScript

$( '#ms4' ).magicSuggest( { data: jsonData, selectionPosition: 'bottom' });

1 2 3 4 5

$( '#ms4' ).magicSuggest( { data: jsonData, selectionPosition: 'bottom' });

 

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

 

デモ1

 

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

JavaScript

$( '#ms1' ).magicSuggest( { maxDropHeight: 0, maxSelection: 3 });

1 2 3 4 5

$( '#ms1' ).magicSuggest( { maxDropHeight: 0, maxSelection: 3 });

 

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

JavaScript

$( '#ms2' ).magicSuggest( { data: jsonData, maxSelection: 3, editable: false });

1 2 3 4 5 6

$( '#ms2' ).magicSuggest( { data: jsonData, maxSelection: 3, editable: false });

 

出力方法をアレンジする

これはあらたに

JavaScript

var jsonData2 = [ {id: '1', name: 'red'}, {id: '2', name: 'green'}, {id: '3', name: 'blue'} ];

1	var jsonData2 = [ {id: '1', name: 'red'}, {id: '2', name: 'green'}, {id: '3', name: 'blue'} ];

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

 

JavaScript

$( '#ms3' ).magicSuggest( { data: jsonData2, maxSelection: 3, editable: false, selectionPosition: 'right', selectionStacked: true, renderer: function( data ) { return '<div><div>' + data.id + '</div></div>'; }, });

1 2 3 4 5 6 7 8 9 10 11 12

$( '#ms3' ).magicSuggest( { data: jsonData2, maxSelection: 3, editable: false, selectionPosition: 'right', selectionStacked: true, renderer: function( data ) { return '<div><div>' + data.id + '</div></div>'; }, });

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

項目をreturnすればよい。

 

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