[jQuery UI] Autocompleteウィジェットのオプション
(対象: jQuery UI 1.8、jQuery 1.4.2、Firefox 3.6.3)
- jQuery UI(3/23)
- jQuery(8/60)
- JavaScript(11/83)
- Ajax(3/25)
- プログラミング(29/225)
- ユーザーインターフェース(6/39)
- Webブラウザ(17/119)
- クライアント(19/131)
Amazon | Yahoo! ショッピング | 楽天市場 |
このページを含むトピック
Autocompleteウィジェットには、disabled、delay、minLength、sourceという4つのオプションを設定できる。方法は、ウィジェット生成時とその後で異なる。
Autocompleteウィジェットのオプション
名称 | はたらき | 設定可能な値(太字がデフォルト) |
---|---|---|
disabled | ウィジェットを無効にする | true / false |
delay | キーワード入力後にリスト表示処理を開始するまでの時間 | 1秒間を1000とする値(300) |
minLength | リスト表示を行うのに必要なキーワードの最低文字数 | 正の整数 (1) |
source | リストに表示する文字列 | 配列、文字列(URL)、関数(戻り値は配列)のどれかが必須 |
※これから以下で掲げる実行画面はすべてFirefox3.6によるものとする。
オプションの設定と参照
オプションの設定は、ウィジェット生成時には {...}、その後は$(...).autocomplete( 'option', ... ) というoptionメソッドで行う。optionメソッドでは、設定するオプションが1つのときは、その名称と値をautocompleteの引数とし、複数であれば'option'の次の引数で{...}を設定する。{...}は、ウィジェットの生成時、生成後のどちらも複数のオプションを設定するのに用いる。
オプションの値を設定
// ウィジェット生成時
jQuery( '#widget' ).autocomplete( { オプション名称: 値, ... } );
// ウィジェット生成後
// 1つのオプションの値を設定
jQuery( '#widget' ).autocomplete( 'option', 'オプション名称', 値 );
// 複数のオプションの値を設定
jQuery( '#widget' ).autocomplete( 'option', { オプション名称: 値, ... } );
オプションの値を参照
// オプションの値を参照
jQuery( '#widget' ).autocomplete( 'option', 'オプション名称' );
disabled - ウィジェットを無効にする
disabledの状態(例)
<input id="switch" type="checkbox" />
<label for="switch">ウィジェット<span id="indicator">無効</span></label>
<input id="widget" type="text" />
// jQuery UI
jQuery( function( $ ) { // このブロック内の$はjQuery専用
$( '#switch' ).change( function() {
$( '#widget' ).autocomplete( 'option', 'disabled', !this.checked );
$( '#indicator' ).text( $( '#widget' ).autocomplete( 'option', 'disabled' ) ? '無効' : '有効' );
} );
$( '#widget' ).autocomplete( {
// disabled: true,
source: [ 'jQuery', 'jQuery UI', 'JavaScript' ]
} ).autocomplete( 'option', 'disabled', true ); // いずれ改善されるかも
} );
disabledはtrueのときウィジェットを無効にするオプションだ。ただしバージョン1.8では、ウィジェット生成時に設定されないことや、このオプションをtrueにしても、表示は薄くなるもののリスト自体は動作することに注意したい。
delay - キーワード入力後にリスト表示処理を開始するまでの時間
delayオプションはキーワードがフィールドに入力されてから、どのくらい後にリスト表示処理を開始するかを設定する。値は1秒間を1000とするので、デフォルトの300は0.3秒後となる。
あまり値を大きくしすぎると、ユーザーには処理がもたついている見えるかもしれないが、逆に小さくしすぎると、リストの内容をサーバから受け取る場合にサーバの負担が大きくなるおそれがあるので、それぞれを勘案して値を設定したい。
minLength - リスト表示処理を開始するときのキーワードの最低文字数
minLengthはフィールドに何文字入力されたらリスト表示処理を開始するかを設定するオプションだ。デフォルトは1だが、1文字だけでは該当する文字列の数が多すぎるときは、もう少し大きな数に設定するのがいいだろう。