Jqueryui-autocomplete
JqueryUI-オートコンプリート
自動補完は、最近のWebサイトで頻繁に使用されるメカニズムで、ユーザーがテキストボックスに入力した単語の先頭の候補リストを提供します。 その後、ユーザーはリストから項目を選択でき、入力フィールドに表示されます。 この機能により、ユーザーは単語全体または一連の単語を入力する必要がなくなります。
JQueryUIは、オートコンプリートウィジェットを提供します。これは、<select>ドロップダウンによく似たコントロールですが、ユーザーがコントロールに入力しているものに一致するもののみを表示するように選択をフィルタリングします。 jQueryUIは、入力フィールドの下に候補のリストを作成する* autocomplete()*メソッドを提供し、適切なスタイルを与えるために関連する要素に新しいCSSクラスを追加します。
入力を受け取ることができるフィールドは、オートコンプリート、つまり_ <input> 要素、 <textarea> _要素、および_contenteditable_属性を持つ要素に変換できます。
構文
- autocomplete()*メソッドは2つの形式で使用できます-
- link:/jqueryui/jqueryui_autocomplete#autocomplete_options [$(selector、context).autocomplete(options)]メソッド
- link:/jqueryui/jqueryui_autocomplete#autocomplete_methods [$(selector、context).autocomplete( "action"、params)]メソッド
[autocomplete_options]#
$(セレクター、コンテキスト).autocomplete(オプション)メソッド
_autocomplete(options)_メソッドは、HTML <input>要素を、提案リストの上に表示される入力フィールドとして管理する必要があることを宣言します。 _options_パラメーターは、ユーザーが入力フィールドに入力しているときの候補リストの動作を指定するオブジェクトです。
構文
Javascriptオブジェクトを使用して、一度に1つ以上のオプションを提供できます。 提供する複数のオプションがある場合は、次のようにカンマを使用してそれらを分離します-
次の表は、この方法で使用できるさまざまな_オプション_を示しています-
Sr.No. | Option & Description |
---|---|
1 |
このオプションは、メニューに要素を追加するために使用されます。 デフォルトでは、その値は null です。
このオプションは、メニューに要素を追加するために使用されます。 デフォルトでは、その値は null です。 値がnullの場合、入力フィールドの親は_ui-front_のクラスをチェックします。 _ui-front_クラスを持つ要素が見つかった場合、メニューはその要素に追加されます。 構文 |
2 |
このオプションを_true_に設定すると、メニューが表示されるときにメニューの最初の項目が自動的にフォーカスされます。 デフォルトでは、その値は false です。
このオプションを_true_に設定すると、メニューが表示されるときにメニューの最初の項目が自動的にフォーカスされます。 デフォルトでは、その値は false です。 構文 |
3 |
このオプションは、一致する値(_source_オプションで指定)を取得する前に待機するミリ秒数を表す整数です。 これにより、検索を開始する前にユーザーにさらに文字を入力する時間を与えることで、非ローカルデータを取得する際のスラッシングを減らすことができます。 デフォルトでは、その値は 300 です。 オプション-遅延 このオプションは、一致する値(_source_オプションで指定)を取得する前に待機するミリ秒数を表す整数です。 これにより、検索を開始する前にユーザーにさらに文字を入力する時間を与えることで、非ローカルデータを取得する際のスラッシングを減らすことができます。 デフォルトでは、その値は 300 です。 構文 |
4 |
このオプションが指定され、_true_の場合、自動補完ウィジェットは最初は無効になっています。 デフォルトでは、その値は false です。 オプション-無効 このオプションが指定され、_true_の場合、自動補完ウィジェットは最初は無効になっています。 デフォルトでは、その値は false です。 構文 |
5 |
一致する値を取得する前に入力する必要がある文字数(ソースオプションで指定)。 これにより、数個の文字ではセットを適切なレベルまで削るには不十分な場合に、大きすぎる値セットが表示されるのを防ぐことができます。 デフォルトでは、その値は 1 です。
一致する値を取得する前に入力する必要がある文字数(ソースオプションで指定)。 これにより、数個の文字ではセットを適切なレベルまで削るには不十分な場合に、大きすぎる値セットが表示されるのを防ぐことができます。 デフォルトでは、その値は 1 です。 構文 |
6 |
このオプションは、関連する入力要素に対する提案メニューの位置を識別します。 _of_オプションはデフォルトで入力要素に設定されますが、配置する別の要素を指定できます。 デフォルトでは、その値は \ {my: "left top"、at: "left bottom"、collision: "none"} です。 オプション-位置 このオプションは、関連する入力要素に対する提案メニューの位置を識別します。 _of_オプションはデフォルトで入力要素に設定されますが、配置する別の要素を指定できます。 デフォルトでは、その値は \ {my: "left top"、at: "left bottom"、collision: "none"} です。 構文 |
7 |
このオプションは、入力データと一致するデータを取得する方法を指定します。 値を指定する必要があります。そうしないと、オートコンプリートウィジェットが作成されません。 デフォルトでは、その値は* noneです。指定する必要があります*。 オプション-ソース このオプションは、入力データと一致するデータを取得する方法を指定します。 値を指定する必要があります。そうしないと、オートコンプリートウィジェットが作成されません。 この値は次のいずれかです。
構文 |
次のセクションでは、オートコンプリートウィジェット機能のいくつかの実用例を示します。
デフォルトの機能
次の例は、* autocomplete()*メソッドにパラメーターを渡さない、オートコンプリートウィジェット機能の簡単な例を示しています。
上記のコードをHTMLファイル autocompleteexample に保存し、JavaScriptをサポートする標準のブラウザーで開くと、次の出力が表示されます。 今、あなたは結果で遊ぶことができます-
autoFocusの使用
次の例は、JqueryUIのオートコンプリートウィジェットでオプション autoFocus を使用する方法を示しています。
上記のコードをHTMLファイル autocompleteexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。 今、あなたは結果で遊ぶことができます-
minLengthと遅延の使用
次の例は、JqueryUIのオートコンプリートウィジェットでの2つのオプション minLength および delay の使用法を示しています。
上記のコードをHTMLファイル autocompleteexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。 今、あなたは結果で遊ぶことができます-
ラベルの使用
次の例は、JqueryUIのオートコンプリートウィジェットでオプション label を使用する方法を示しています。
上記のコードをHTMLファイル autocompleteexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。 今、あなたは結果で遊ぶことができます-
外部ソースの使用
次の例は、JqueryUIのオートコンプリートウィジェットの source オプションに外部ファイルを使用する方法を示しています。
_search.php_ファイルは、上記のファイル(autocompleteexamplel)と同じ場所に配置されます。 search.phpの内容は以下の通りです-
上記のコードをHTMLファイル autocompleteexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。 今、あなたは結果で遊ぶことができます-
[autocomplete_methods]#
$(セレクター、コンテキスト).autocomplete( "action"、params)メソッド
_autocomplete( "action"、params)_メソッドは、表示や非表示などの提案のリストに対してアクションを実行できます。 アクションは、最初の引数で文字列として指定されます(例:リストを非表示にする「閉じる」)。 次の表で、渡すことができるアクションを確認してください。
構文
次の表は、このメソッドで使用できるさまざまな_アクション_を示しています-
Sr.No. | Action & Description |
---|---|
1 |
このアクションにより、オートコンプリートメニューの候補リストが非表示になります。 このメソッドは引数を取りません。 アクション-閉じる このアクションにより、オートコンプリートメニューの候補リストが非表示になります。 このメソッドは引数を取りません。 構文 |
2 |
このアクションにより、オートコンプリート機能が削除されます。 候補のリストが削除されます。 このメソッドは引数を取りません。 アクション-破壊 このアクションにより、オートコンプリート機能が削除されます。 候補のリストが削除されます。 このメソッドは引数を取りません。 構文 |
3 |
このアクションは、オートコンプリートメカニズムを無効にします。 候補のリストは表示されなくなりました。 このメソッドは引数を取りません。 アクション-無効 このアクションは、オートコンプリートメカニズムを無効にします。 候補のリストは表示されなくなりました。 このメソッドは引数を取りません。 構文 |
4 |
このアクションは、オートコンプリートメカニズムを再アクティブ化します。 提案のリストが再び表示されます。 このメソッドは引数を取りません。 アクション-有効 このアクションは、オートコンプリートメカニズムを再アクティブ化します。 提案のリストが再び表示されます。 このメソッドは引数を取りません。 構文 |
5 |
このアクションは、指定されたparam _optionName_の値を取得します。 このオプションは、オートコンプリートで使用されるオプション(オプション)の1つに対応します。 アクション-option(optionName) このアクションは、指定されたparam _optionName_の値を取得します。 このオプションは、オートコンプリートで使用されるオプション(オプション)の1つに対応します。 構文 |
6 |
このアクションは、現在のオートコンプリートオプションハッシュを表すキー/値ペアを含むオブジェクトを取得します。 アクション-オプション このアクションは、現在のオートコンプリートオプションハッシュを表すキー/値ペアを含むオブジェクトを取得します。 構文 |
7 |
このアクションは、指定された_optionName_に関連付けられたオートコンプリートオプションの値を設定します。 引数_optionName_は設定するオプションの名前であり、_value_はオプションに設定する値です。 アクション-option(optionName、value) このアクションは、指定された_optionName_に関連付けられたオートコンプリートオプションの値を設定します。 引数_optionName_は設定するオプションの名前であり、_value_はオプションに設定する値です。 構文 |
8 |
このアクションは、オートコンプリートの1つ以上のオプションを設定します。 引数_options_は、設定するオプションと値のペアのマップです。 アクション-オプション(オプション) このアクションは、オートコンプリートの1つ以上のオプションを設定します。 引数_options_は、設定するオプションと値のペアのマップです。 構文 |
9 |
このアクションは、文字列値とデータソース(_options.source_で指定)の間の対応を検索します。 値の最小文字数(_options.minLength_で示される)に達する必要があります。そうでない場合、検索は実行されません。 アクション-検索([値]) このアクションは、文字列値とデータソース(_options.source_で指定)の間の対応を検索します。 値の最小文字数(_options.minLength_で示される)に達する必要があります。そうでない場合、検索は実行されません。 構文 |
10 |
提案のリストに対応する<ul> DOM要素を取得します。 これは、jQueryセレクターを使用せずにリストに簡単にアクセスできるjQueryクラスのオブジェクトです。 アクション-ウィジェット 提案のリストに対応する<ul> DOM要素を取得します。 これは、jQueryセレクターを使用せずにリストに簡単にアクセスできるjQueryクラスのオブジェクトです。 構文 |
例
ここで、上の表のアクションを使用した例を見てみましょう。 次の例は、_option(optionName、value)_メソッドの使用方法を示しています。
上記のコードをHTMLファイル autocompleteexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も確認する必要があります-
拡張ポイント
オートコンプリートウィジェットは、ウィジェットファクトリでビルドされたものとして拡張できます。 ウィジェットを拡張する場合、既存のメソッドの動作をオーバーライドまたは追加することができます。 次の表は、リンクをリストしたプラグインメソッドと同じAPI安定性を持つ拡張ポイントとして機能するメソッドを示しています:/jqueryui/jqueryui_autocomplete#autocomplete_methods [上記]。
Sr.No. | Method & Description |
---|---|
1 |
このメソッドは、ウィジェットのメニューの各オプションの作成を制御します。 このメソッドは、新しい<li>要素を作成し、メニューに追加して返します。
このメソッドは、ウィジェットのメニューの各オプションの作成を制御します。 このメソッドは、新しい<li>要素を作成し、メニューに追加して返します。 どこ-
|
2 |
このメソッドは、ウィジェットのメニューの構築を制御します。
このメソッドは、ウィジェットのメニューの構築を制御します。 どこ-
|
3 |
このメソッドは、表示前のメニューのサイズ変更を制御します。メニュー要素は、_this.menu.element_で使用できます。 このメソッドは引数を取りません。
このメソッドは、表示前のメニューのサイズ変更を制御します。メニュー要素は、_this.menu.element_で使用できます。 このメソッドは引数を取りません。 |
オートコンプリート要素のイベント管理
前のセクションで見たオートコンプリート(オプション)メソッドに加えて、JqueryUIは特定のイベントに対してトリガーされるイベントメソッドを提供します。 これらのイベントメソッドは以下のとおりです-
Sr.No. | Event Method & Description |
---|---|
1 |
このイベントは、選択に基づいて<input>要素の値が変更されるとトリガーされます。 トリガーされると、このイベントは常に_close_イベントがトリガーされた後に発生します。 イベント-change(event、ui) このイベントは、選択に基づいて<input>要素の値が変更されるとトリガーされます。 トリガーされると、このイベントは常に_close_イベントがトリガーされた後に発生します。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は-
構文 |
2 |
このイベントは、オートコンプリートメニューが閉じるたびにトリガーされます。 イベント-close(event、ui) このイベントは、オートコンプリートメニューが閉じるたびにトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。 構文 |
3 |
このイベントは、オートコンプリートが作成されるとトリガーされます。 イベント-create(event、ui) このイベントは、オートコンプリートが作成されるとトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は-
構文 |
4 |
このイベントは、メニュー選択の1つがフォーカスを受け取るたびにトリガーされます。 キャンセルしない限り(たとえば、falseを返すことによって)、フォーカスされた値は<input>要素に設定されます。 イベント-focus(event、ui) このイベントは、メニュー選択の1つがフォーカスを受け取るたびにトリガーされます。 キャンセルしない限り(たとえば、falseを返すことによって)、フォーカスされた値は<input>要素に設定されます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は-
構文 |
5 |
このイベントは、データが準備され、メニューが開かれる直前にトリガーされます。 イベント-open(event、ui) このイベントは、データが準備され、メニューが開かれる直前にトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。 構文 |
6 |
このイベントは、検索が完了した後、メニューが表示される前にトリガーされます。 このイベントは、検索結果が存在しないか、オートコンプリートが無効になっているためにメニューが表示されない場合でも、検索が完了すると常にトリガーされます。 イベント-応答(イベント、UI) このイベントは、検索が完了した後、メニューが表示される前にトリガーされます。 このイベントは、検索結果が存在しないか、オートコンプリートが無効になっているためにメニューが表示されない場合でも、検索が完了すると常にトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は-
構文 |
7 |
このイベントは、_delay_および_minLength_基準が満たされた後、sourceで指定されたメカニズムがアクティブになる直前にトリガーされます。 キャンセルされた場合、検索操作は中止されます。 イベント-検索(イベント、UI) このイベントは、_delay_および_minLength_基準が満たされた後、sourceで指定されたメカニズムがアクティブになる直前にトリガーされます。 キャンセルされた場合、検索操作は中止されます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。 構文 |
8 |
このイベントは、オートコンプリートメニューから値が選択されるとトリガーされます。 このイベントをキャンセルすると、値が<input>要素に設定されなくなります(ただし、メニューが閉じるのを防ぎません)。 イベント-select(event、ui) このイベントは、オートコンプリートメニューから値が選択されるとトリガーされます。 このイベントをキャンセルすると、値が<input>要素に設定されなくなります(ただし、メニューが閉じるのを防ぎません)。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は-
構文 |
例
次の例は、オートコンプリートウィジェットでのイベントメソッドの使用方法を示しています。 この例では、イベント_focus_および_select_の使用方法を示します。
上記のコードをHTMLファイル autocompleteexample に保存し、JavaScriptをサポートする標準のブラウザーで開きます。 また、次の出力を確認する必要があります-