ホーム > autocomplete (全6件)
  • autocompleteウィジェットのプルダウンを閉じる

    IDが’close’のAタグをクリックしたらautocompleteウィジェットのプルダウン（ULタグ）を閉じる（非表示にする）

    $( '#close' ).click( function () {
	$( '#name' ).autocomplete( 'close' );
} );

    表示しているプルダウンを閉じる場合は、autocomplete( 'close' )を使用する。

    キーワード:
  • autocompleteウィジェットのプルダウンを表示する

    IDが’pulldown’のAタをがクリックしたらautocompleteウィジェットのプルダウン（ULタグ）を表示する

    $( '#name' ).autocomplete( { minLength: 0 } );

$( '#pulldown' ).click( function () {
	$( '#name' ).autocomplete( 'search', '' );
} );

    直接的にプルダウンを表示する機能は（おそらく）なく、表示する場合はこのautocomplete( 'search', '' )を使用。第2パラメータにはキーワードとなる文字列を指定するが、初期化時にminLength: 0を指定することで”が有効になり、プルダウンを表示できる。

    キーワード:
  • autocompleteウィジェットのプルダウンが表示しているか調べる

    autocompleteウィジェットを指定したIDが’name’の要素について、プルダウン（UL要素）が表示しているか調べる

    if ( $( '#name' ).autocomplete( 'widget' ).is( ':visible' ) ) {
	/* 表示時の処理 */
} else {
	/* 非表示時の処理 */
}

    autocompleteウィジェット（UL要素）は、autocomplete( 'widget' )で取得でき、is( ':visible' )で表示しているかどうかを調べる。

    キーワード:
  • 「n results are available, use up and down arrow keys to navigate.」を非表示にする

    jQuery UI 1.9.xにアップデートしてautocompleteウィジェットの要素の後に表示される「n results are available, use up and down arrow keys to navigate.」を非表示にする。

    /* cssに次の指定を追加 */
.ui-helper-hidden-accessible {
	display: none;
}

    jQuery UIを1.9.xへアップデートしたautocompleteウィジェットではその候補数を出力するようになった（おそらく他のウェジェットも）。jQuery UIを独自のcssで表示している場合は、ui-helper-hidden-accessibleクラスを表示しないスタイルを追加すること。

    キーワード:
  • オートコンプリートのマッチ最少文字数を設定する

    idがfoodのinput要素にマッチ最少文字数0としてオートコンプリートを設定する。

    /* 初期化時に指定 */
var foods = [ 'apple', 'blueberry', 'cherry', 'melon', 'orange' ];
$( '#food' ).autocomplete( { minLength: 0, source: foods } );

/* 後で変更 */
$( '#food' ).autocomplete( 'option', 'minLength', 0 );

    マッチ最少文字数であるminLengthプロパティのデフォルト値は1。minLengthプロパティを0にすることで、コンボボックスのような機能を実現できる（↓キーでプルダウンリストを表示）。またminLengthプロパティ値を大きくすることで、プルダウンリストの表示を制限できる（特にコンプリート候補が多いケース等）。

    キーワード:
  • オートコンプリートを設定する

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

    キーワード:
 
 
ツールバーへスキップ