idがfoodのinput要素にオートコンプリートを設定する。
/* コンプリート候補に変数を指定 */
var foods = [ 'apple', 'blueberry', 'cherry', 'melon', 'orange' ];
$( '#food' ).autocomplete( { source: foods } );
/* コンプリート候補にURL(JSONデータ)を指定 */
$( '#food' ).autocomplete( { source: 'http://localhost/foods.json' } );
/* コンプリート候補にコールバック関数を指定 */
$( '#food' ).autocomplete( { source: function ( req, add ) {
var candidacy = [];
for ( key in foods ) {
if ( foods[key].indexOf( req.term ) >= 0 )
candidacy.push( foods[key] );
}
add( candidacy );
} } );
初期化時、オートコンプリート候補の指定方法は配列、URL、コールバック関数の3種類になる。コールバック関数を指定した場合は、初期化時ではなく、表示する候補を更新するタイミング毎に呼び出される。なおui-menuクラスのスタイルにfloat: left;
が指定されていない場合、候補リストの幅が入力ボックスよりも大きくなるので注意。
IE7で動作しない場合はjQuery UI 1.9.1にアップデートを。