ホーム > source (全1件)
  • オートコンプリートを設定する

    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にアップデートを。