データの用意
準備として検索用のデータを用意します。
(データの内容は何でもいいですよ？)
処理概要
jQuery UIのautocompleteは、sourceに指定した要素において
labelは見た目上の表示に
valueは選択した際に代入される値
となります。
そのため、まずは $(autocompleteData).each( にて、autocompleteDataの各要素に
labelとvalueをセットします。
labelには、本来は表示されるテキストですが今回はカスタマイズするため、検索対象となる文字列を
valueには選択後にテキストボックスに代入される値を
それぞれセットします。
次にautocompleteを拡張します。
初期化と同時に
focus: function(event, ui)
select: function(event, ui)
をそれぞれ指定します。
コメントの通りですが
focusでは、候補選択時の挙動を
selectでは、候補選択確定時の挙動を
記述します。
最後に、初期化に使用したautocomplete()のメソッドチェーンにて
_renderItemに(function(ul, item)を定義します。
ここでは入力途中で表示される候補のリストの各要素の表示を制御します。
