js STUDIO

Autocomplete 1.8 追加

オートコンプリートのフィールドはフォーカスが当たるか、または何かが入力されると検索を開始して指定されたリストにマッチする項目を表示します。入力を続けれことで更に対照を絞りこみます。

オートコンプリートは、記事へのタグ付け、アドレス帳からのメールアドレス入力、都市名、郵便番号の入力の際に使用されると便利です。 リストへ表示する項目は、ローカルまたはリモートから、そのデータを取得することが可能です。 ローカルからの取得は小規模なデータセット、例えば50件程のアドレス帳で使用するのに適しており、また 数百、数百万のデータベースなどの大規模なデータを取扱う場合は、リモートからの取得が必要になります。 データ取得の詳細を調べるには、オプションのsourceを参照してください。 

<label>プログラム言語を選択してください。</label>
<input id="autocomplete" />
<script>
$( "#autocomplete" ).autocomplete({
    source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ]
});
</script>

キーボード操作のサポートについて

リストメニューが表示されている場合、下記のキーコマンドが利用可能なります。

[↑]
1つ上の項目に移動します。 1つ目の項目であればテキストフィールドに移動し、テキストフィールドであれば最後の項目に移動します。
[↓]
1つ下の項目に移動します。 最後の項目であればテキストフィールドに移動し、テキストフィールドであれば最初の項目に移動します。
ESCAPE
リストメニューを閉じます。
ENTER
現在フォーカスのある項目を選択し、リストメニューを閉じます。
TAB
現在フォーカスのある項目を選択して、リストメニューを閉じ、次の要素にフォーカスを移動します。

リストメニューが閉じている場合、次のキーが利用できます。

[↑][↓]
オプションのminLengthの条件を満たしていれば、リストメニューを開きます。

依存関係

オプション 説明
appendTo

型：Selector
初期値："body"

リストメニューの要素をどの要素内に挿入するのか決定します。 スクロールした際にポップアップメニュー位置が固定されてしまうため、オートコンプリートがposition:fixedの要素内にある場合はこれを上書きします。 

$( ".selector" ).autocomplete({ appendTo: "#someElem" });

// getter
var appendTo = $( ".selector" ).autocomplete( "option", "appendTo" );

// setter
$( ".selector" ).autocomplete( "option", "appendTo", "#someElem" );
autoFocus

型：Boolean
初期値：false

trueを設定すると、メニューが開いた際に最初の項目を選択します。

collapsible

型：Boolean
初期値：false

すべてのパネルを折りたためる事が出来るか否かを指定します。 アクティブなパネルを折りたたむ事が出来るようになります。

delay

型：Integer
初期値：300

キーストロークされてから、リストメニューの検索が実行されまでの遅延時間をミリ秒単位で指定します。 リモートデータを取り扱う場合は、サーバへの負荷を考慮する必要があります。

event

型：String
初期値："click"

アコーディオンの見出しが反応してパネルを展開する際のイベントを指定します。 イベント名を半角スペース区切りで複数指定することが可能です。 

//見出しのマウスオーバーでコンテンツ部分が展開するようになります。
$( ".selector" ).accordion({ event: "mouseover" });
disabled

型：Boolean
初期値：false

trueを設定すると、オートコンプリートを無効化します。

minLength

型：Integer
初期値：1

リストメニューの検索が実行されるのに必要なユーザーが入力する最低限の文字列数を指定します。 0指定は、ローカルデータで項目数がそれほど多くないのであれば有用ですが、リモートデータで データ数も多いケースでは、状況に合わせて高い数値を指定する必要があります。

position

型：Object
初期値：{ my: "left top", at: "left bottom", collision: "none" }

input要素に対するリストメニューの位置を指定します。 ofオプションはデフォルトではinput要素を指定しますが別の要素に変更することも可能です。 また、このオプションの使い方について、jQuery UI Positionを参照して、 更に詳しい指定の方法を確認してみてください。 

$( ".selector" ).autocomplete({ position: { my : "right top", at: "right bottom" } });
source

型：Array or String or Function(Object request, Function response(Object data))
初期値：無し(入力必須)

使用するデータを定義します。この項目は必ず入力してください。

指定した型とは無関係に、リストメニューのラベルは全てテキストとして扱われます。 もしHTMLを扱いたい場合は、 jquery.ui.autocomplete.html.js で拡張することによって使用可能になります。

メソッド説明
close()

オートコンプリートメニューを閉じます。 searchメソッドと組み合わせてメニューを閉じる際に使用すると便利です。 

$( ".selector" ).autocomplete( "close" );
destroy()

オートコンプリートの機能を完全に削除します。

disable()

オートコンプリートを無効化します。

enable()

オートコンプリートを有効にします。

option( optionName )

戻り値：Object

optionNameに指定したオプションの現在の値を取得します。

optionName
型：String
取得したいオプションの名前を指定します。
option()

戻り値：PlainObject

オプションの各キーと値がペアとなったオブジェクトを返します。

option( optionName, value )

引数のoptionNameのオプションに値を設定します。

optionName
型：String
設定したいオプションの名前を指定します。
value
型：Object
設定したい値を指定します。
option( options )

オプションに設定したい各キーと値がペアとなったオブジェクトを指定します。

option
型：Object
設定したいオプションのキーと名前のペアを指定します。
search( [value] )

ダイアログがドラッグされている間、トリガされます。

[value]
型：String Searchイベントをトリガして、イベントがキャンセルされなければデータを絞り込みます。 これはセレクトボックス風のボタンをクリックして候補リストを表示したい場合に便利です。 [value]に何も指定されなかった場合は、入力されている値が使用されます。 もし、空文字列を指定し且つminLength:0であれば、全ての項目を表示します。
widget()

メニュー要素を含むjQueryオブジェクトを返します。 メニュー要素は常に作成、破棄が行われますが、要素自体は初期化時に生成され、再利用されています。

イベント 説明
change( event, ui )

型：autocompletechange

入力値が変更された時にトリガされます。

ui.item
型：jQuery
もし、メニューが選択されていればその項目を取得します。 そうでなければnullになります。 
$( ".selector" ).autocomplete({
    change: function( event, ui ){
      //実行したい処理
    }
});

$( ".selector" ).on( "autocompletechange", function(event, ui){
  //実行したい処理
});
create( event, ui )

型：autocompletecreate

オートコンプリートが生成された際にトリガされます。

focus( event, ui )

型：autocompletefocus

フォーカスがメニューに移った(選択はされていない)際にトリガされます。 デフォルトのアクションは、イベントがキーボード操作によってトリガされたものの場合にのみ、 フォーカスされた項目の値を使用して、テキストフィールドの値を交換します。

ui.item
フォーカスされたメニューの項目
open( event, ui )

型：autocompleteopen

候補となるメニューリストが開かれた、または更新された際にトリガされます。

response( event, ui )
1.9追加

型：autocompleteresponse

候補となるメニューの項目が検索完了後で且つメニューを開く直前にトリガされます。 オプションsourceのコールバ���クが必要とされないローカルデータを操作したい場合に便利です。 このイベントは、検索結果が0件であったりオートコンプリートが無効化されていてメニューが表示されない場合でも、 検索完了後に常にトリガされます。

ui.content
型：Array
検索されたデータを受けとって、表示前に編集することが可能です。 このデータは常に正規化されており、編集する際にはラベルと値のプロパティになっている事を確認してください。
search( event, ui )

型：autocompletesearch

minLengthとdelayの条件を満たし、検索を実行する直前にトリガされます。 もしキャンセルされた場合、検索のためのリクエストは送信されず、候補リストも取得されません。

select( event, ui )

型：autocompleteselect

メニューから項目を選択した際にトリガされます。 デフォルトの動作は、選択した項目を入力項目と置き換えます。 キャンセルをすると、入力項目との置き換えを行いませんが、メニューを閉じることをキャンセルすることは出来ません。

ui.item
型：jQuery
選択した項目。

 Back to top

© 2010 - 2017 STUDIO KINGDOM