メン醤のjQuery workshop

jQueryの小技などのサンプルをコード例として紹介するブログです。ネイティブJavaScriptから移行したいjQuery初心者向け、jQueryの魅力を知ってもらえたら。

jQuery UI autocompleteの検索条件をカスタマイズする

データの用意

準備として検索用のデータを用意します。
(データの内容は何でもいいですよ?)

処理概要

jQuery UIのautocompleteは、sourceに指定した要素において
labelは見た目上の表示に
valueは選択した際に代入される値
となります。

そのため、まずは $(autocompleteData).each( にて、autocompleteDataの各要素に
labelvalueをセットします。
labelには、本来は表示されるテキストですが今回はカスタマイズするため、索対象となる文字列を
valueには選択後にテキストボックスに代入される値を それぞれセットします。

次にautocompleteを拡張します。

初期化と同時に
focus: function(event, ui)
select: function(event, ui)
をそれぞれ指定します。
コメントの通りですが
focusでは、候補選択時の挙動を
selectでは、候補選択確定時の挙動を
記述します。

最後に、初期化に使用したautocomplete()メソッドチェーンにて
_renderItem(function(ul, item)を定義します。
ここでは入力途中で表示される候補のリストの各要素の表示を制御します。

こんな感じの挙動になります


jQuery UI autocompleteの検索条件をカスタマイズ