メニュー トピック本文へ

[jQuery UI] Autocompleteウィジェットのオプション

jQuery UIは、JavaScriptライブラリjQueryを用いて構築されたUIコンポーネントを集めたライブラリおよびフレームワークだ。バージョンが上がるごとにデザイン性も向上し、コンポーネント群も充実してきている。ここではそれらの中から、バージョン1.8で追加されたAutocompleteウィジェットについて述べていきたい。
(対象: jQuery UI 1.8、jQuery 1.4.2、Firefox 3.6.3)

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の状態(例)
 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文字だけでは該当する文字列の数が多すぎるときは、もう少し大きな数に設定するのがいいだろう。

リストに表示する内容(sourceオプション)を設定 »

« jQuery UI1.8で追加されたウィジェット(Autocomplete編)

TwitterでつぶやくはてなブックマークlivedoorクリップYahoo!ブックマークGoogleブックマークdel.icio.usBuzzurl@niftyクリップ 2010/05/10