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_パラメーターは、ユーザーが入力フィールドに入力しているときの候補リストの動作を指定するオブジェクトです。

構文

$(selector, context).autocomplete (options);

Javascriptオブジェクトを使用して、一度に1つ以上のオプションを提供できます。提供する複数のオプションがある場合は、次のようにカンマを使用してそれらを分離します-

$(selector, context).autocomplete({option1: value1, option2: value2..... });

次の表は、この方法で使用できるさまざまな_オプション_を示しています-


$( ".selector" ).autocomplete({ appendTo: "#identifier" });
$( ".selector" ).autocomplete({ autoFocus: true });
$( ".selector" ).autocomplete({ delay: 500 });
$( ".selector" ).autocomplete({ disabled: true });
$( ".selector" ).autocomplete({ minLength: 0 });
$( ".selector" ).autocomplete({ position: { my : "right top", at: "right bottom" } });
$( ".selector" ).autocomplete({ source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] });

次のセクションでは、オートコンプリートウィジェット機能のいくつかの実用例を示します。

デフォルトの機能

次の例は、* autocomplete（）*メソッドにパラメーターを渡さない、オートコンプリートウィジェット機能の簡単な例を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <!-- Javascript -->
      <script>
         $(function() {
            var availableTutorials  =  [
               "ActionScript",
               "Bootstrap",
               "C",
               "C++",
            ];
            $( "#automplete-1" ).autocomplete({
               source: availableTutorials
            });
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <div class = "ui-widget">
         <p>Type "a" or "s"</p>
         <label for = "automplete-1">Tags: </label>
         <input id = "automplete-1">
      </div>
   </body>
</html>

上記のコードをHTMLファイル autocompleteexample に保存し、JavaScriptをサポートする標準のブラウザーで開くと、次の出力が表示されます。今、あなたは結果で遊ぶことができます-

autoFocusの使用

次の例は、JqueryUIのオートコンプリートウィジェットでオプション autoFocus を使用する方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <!-- Javascript -->
      <script>
         $(function() {
            var availableTutorials = [
               "ActionScript",
               "Bootstrap",
               "C",
               "C++",
            ];
            $( "#automplete-2" ).autocomplete({
               source: availableTutorials,
               autoFocus:true
            });
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <div class = "ui-widget">
         <p>Type "a" or "s"</p>
         <label for = "automplete-2">Tags: </label>
         <input id = "automplete-2">
      </div>
   </body>
</html>

上記のコードをHTMLファイル autocompleteexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

minLengthと遅延の使用

次の例は、JqueryUIのオートコンプリートウィジェットでの2つのオプション minLength および delay の使用法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <!-- Javascript -->
      <script>
         $(function() {
            var availableTutorials = [
               "ActionScript",
               "Bootstrap",
               "C",
               "C++",
               "Ecommerce",
               "Jquery",
               "Groovy",
               "Java",
               "JavaScript",
               "Lua",
               "Perl",
               "Ruby",
               "Scala",
               "Swing",
               "XHTML"
            ];
            $( "#automplete-3" ).autocomplete({
               minLength:2,
               delay:500,
               source: availableTutorials
            });
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <div class = "ui-widget">
         <p>Type two letter for e.g:ja,sc etc</p>
         <label for = "automplete-3">Tags: </label>
         <input id = "automplete-3">
      </div>
   </body>
</html>

上記のコードをHTMLファイル autocompleteexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

ラベルの使用

次の例は、JqueryUIのオートコンプリートウィジェットでオプション label を使用する方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#autocomplete-4" ).autocomplete({
               source: [
                  { label: "India", value: "IND" },
                  { label: "Australia", value: "AUS" }
               ]
            });
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <div class = "ui-widget">
         <p>Type I OR A</p>
         <input id = "autocomplete-4">
      </div>
   </body>
</html>

上記のコードをHTMLファイル autocompleteexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

外部ソースの使用

次の例は、JqueryUIのオートコンプリートウィジェットの source オプションに外部ファイルを使用する方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#autocomplete-5" ).autocomplete({
               source: "/jqueryui/search.php",
               minLength: 2
            });
         });
      </script>
   </head>

   <body>
      <input id = "autocomplete-5">
   </body>
</html>

_search.php_ファイルは、上記のファイル（autocompleteexamplel）と同じ場所に配置されます。 search.phpの内容は以下の通りです-

<?
$term = $_GET[ "term" ];
$companies = array(
   array( "label" => "JAVA", "value" => "1" ),
   array( "label" => "DATA IMAGE PROCESSING", "value" => "2" ),
   array( "label" => "JAVASCRIPT", "value" => "3" ),
   array( "label" => "DATA MANAGEMENT SYSTEM", "value" => "4" ),
   array( "label" => "COMPUTER PROGRAMMING", "value" => "5" ),
   array( "label" => "SOFTWARE DEVELOPMENT LIFE CYCLE", "value" => "6" ),
   array( "label" => "LEARN COMPUTER FUNDAMENTALS", "value" => "7" ),
   array( "label" => "IMAGE PROCESSING USING JAVA", "value" => "8" ),
   array( "label" => "CLOUD COMPUTING", "value" => "9" ),
   array( "label" => "DATA MINING", "value" => "10" ),
   array( "label" => "DATA WAREHOUSE", "value" => "11" ),
   array( "label" => "E-COMMERCE", "value" => "12" ),
   array( "label" => "DBMS", "value" => "13" ),
   array( "label" => "HTTP", "value" => "14" )

);

$result = array();
foreach ($companies as $company) {
   $companyLabel = $company[ "label" ];
   if ( strpos( strtoupper($companyLabel), strtoupper($term) )!== false ) {
      array_push( $result, $company );
   }
}

echo json_encode( $result );
?>

上記のコードをHTMLファイル autocompleteexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

[autocomplete_methods]#

$（セレクター、コンテキスト）.autocomplete（ "action"、params）メソッド

_autocomplete（ "action"、params）_メソッドは、表示や非表示などの提案のリストに対してアクションを実行できます。アクションは、最初の引数で文字列として指定されます（例：リストを非表示にする「閉じる」）。次の表で、渡すことができるアクションを確認してください。

構文

$(selector, context).autocomplete ("action", params);;

次の表は、このメソッドで使用できるさまざまな_アクション_を示しています-


$( ".selector" ).autocomplete("close");
$( ".selector" ).autocomplete("destroy");
$( ".selector" ).autocomplete("disable");
$( ".selector" ).autocomplete("enable");
var isDisabled = $( ".selector" ).autocomplete( "option", "disabled" );
var options = $( ".selector" ).autocomplete( "option" );
$( ".selector" ).autocomplete( "option", "disabled", true );
$( ".selector" ).autocomplete( "option", { disabled: true } );
$( ".selector" ).autocomplete( "search", "" );
$( ".selector" ).autocomplete("widget");

例

ここで、上の表のアクションを使用した例を見てみましょう。次の例は、_option（optionName、value）_メソッドの使用方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <!-- Javascript -->
      <script>
         $(function() {
            var availableTutorials = [
               "ActionScript",
               "Bootstrap",
               "C",
               "C++",
               "Ecommerce",
               "Jquery",
               "Groovy",
               "Java",
               "JavaScript",
               "Lua",
               "Perl",
               "Ruby",
               "Scala",
               "Swing",
               "XHTML"
            ];
            $( "#automplete-6" ).autocomplete({
               source: availableTutorials
            });
            $( "#automplete-6" ).autocomplete("option", "position",
               { my : "right-10 top+10", at: "right top" })
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <div class = "ui-widget">
         <p>Type "a" or "s"</p>
         <label for = "automplete-6">Tags: </label>
         <input id = "automplete-6">
      </div>
   </body>
</html>

上記のコードをHTMLファイル autocompleteexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も確認する必要があります-

拡張ポイント

オートコンプリートウィジェットは、ウィジェットファクトリでビルドされたものとして拡張できます。ウィジェットを拡張する場合、既存のメソッドの動作をオーバーライドまたは追加することができます。次の表は、リンクをリストしたプラグインメソッドと同じAPI安定性を持つ拡張ポイントとして機能するメソッドを示しています：/jqueryui/jqueryui_autocomplete＃autocomplete_methods [上記]。

Sr.No.

Method & Description

1

_renderItem( ul, item )

このメソッドは、ウィジェットのメニューの各オプションの作成を制御します。このメソッドは、新しい<li>要素を作成し、メニューに追加して返します。

_renderItem（ul、item）*

このメソッドは、ウィジェットのメニューの各オプションの作成を制御します。このメソッドは、新しい<li>要素を作成し、メニューに追加して返します。どこ-

<ul> は、新しく作成された<li>要素に追加する必要がある要素です。
項目 +は、label（String）、アイテムに表示する文字列、または_value（String）_、アイテムが選択されたときに入力に挿入する値になります。

2

_renderMenu( ul, items )

このメソッドは、ウィジェットのメニューの構築を制御します。

_renderMenu（ul、items）*

このメソッドは、ウィジェットのメニューの構築を制御します。どこ-

<ul> は、ユーザーが入力した用語に一致するアイテムの配列です。各アイテムは、_label_プロパティと_value_プロパティを持つオブジェクトです。

3

_resizeMenu()

このメソッドは、表示前のメニューのサイズ変更を制御します。メニュー要素は、_this.menu.element_で使用できます。このメソッドは引数を取りません。

_resizeMenu（）*

このメソッドは、表示前のメニューのサイズ変更を制御します。メニュー要素は、_this.menu.element_で使用できます。このメソッドは引数を取りません。

オートコンプリート要素のイベント管理

前のセクションで見たオートコンプリート（オプション）メソッドに加えて、JqueryUIは特定のイベントに対してトリガーされるイベントメソッドを提供します。これらのイベントメソッドは以下のとおりです-


$( ".selector" ).autocomplete({
   change: function( event, ui ) {}
});
$( ".selector" ).autocomplete({
   close: function( event, ui ) {}
});
$( ".selector" ).autocomplete({
   create: function( event, ui ) {}
});
$( ".selector" ).autocomplete({
   focus: function( event, ui ) {}
});
$( ".selector" ).autocomplete({
   open: function( event, ui ) {}
});
$( ".selector" ).autocomplete({
   response: function( event, ui ) {}
});
$( ".selector" ).autocomplete({
   search: function( event, ui ) {}
});
$( ".selector" ).autocomplete({
   select: function( event, ui ) {}
});

例

次の例は、オートコンプリートウィジェットでのイベントメソッドの使用方法を示しています。この例では、イベント_focus_および_select_の使用方法を示します。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <style>
         #project-label {
            display: block;
            font-weight: bold;
            margin-bottom: 1em;
         }
         #project-icon {
            float: left;
            height: 32px;
            width: 32px;
         }
         #project-description {
            margin: 0;
            padding: 0;
         }
      </style>

      <!-- Javascript -->
      <script>
         $(function() {
            var projects = [
               {
                  value: "java",
                  label: "Java",
                  desc: "write once run anywhere",
               },
               {
                  value: "jquery-ui",
                  label: "jQuery UI",
                  desc: "the official user interface library for jQuery",
               },
               {
                  value: "Bootstrap",
                  label: "Twitter Bootstrap",
                  desc: "popular front end frameworks ",
               }
            ];
            $( "#project" ).autocomplete({
               minLength: 0,
               source: projects,
               focus: function( event, ui ) {
                  $( "#project" ).val( ui.item.label );
                     return false;
               },
               select: function( event, ui ) {
                  $( "#project" ).val( ui.item.label );
                  $( "#project-id" ).val( ui.item.value );
                  $( "#project-description" )l( ui.item.desc );
                  return false;
               }
            })

            .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
               return $( "<li>" )
               .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
               .appendTo( ul );
            };
         });
      </script>
   </head>

   <body>
      <div id = "project-label">Select a project (type "a" for a start):</div>
      <input id = "project">
      <input type = "hidden" id = "project-id">
      <p id = "project-description"></p>
   </body>
</html>

上記のコードをHTMLファイル autocompleteexample に保存し、JavaScriptをサポートする標準のブラウザーで開きます。また、次の出力を確認する必要があります-

Sr.No.	Option & Description
1	appendTo このオプションは、メニューに要素を追加するために使用されます。デフォルトでは、その値は null です。オプション-appendTo * このオプションは、メニューに要素を追加するために使用されます。デフォルトでは、その値は null です。値がnullの場合、入力フィールドの親は_ui-front_のクラスをチェックします。 _ui-front_クラスを持つ要素が見つかった場合、メニューはその要素に追加されます。構文 `$( ".selector" ).autocomplete({ appendTo: "#identifier" });`
2	autoFocus このオプションを_true_に設定すると、メニューが表示されるときにメニューの最初の項目が自動的にフォーカスされます。デフォルトでは、その値は false です。オプション-autoFocus * このオプションを_true_に設定すると、メニューが表示されるときにメニューの最初の項目が自動的にフォーカスされます。デフォルトでは、その値は false です。構文 `$( ".selector" ).autocomplete({ autoFocus: true });`
3	delay このオプションは、一致する値（_source_オプションで指定）を取得する前に待機するミリ秒数を表す整数です。これにより、検索を開始する前にユーザーにさらに文字を入力する時間を与えることで、非ローカルデータを取得する際のスラッシングを減らすことができます。デフォルトでは、その値は 300 です。オプション-遅延このオプションは、一致する値（_source_オプションで指定）を取得する前に待機するミリ秒数を表す整数です。これにより、検索を開始する前にユーザーにさらに文字を入力する時間を与えることで、非ローカルデータを取得する際のスラッシングを減らすことができます。デフォルトでは、その値は 300 です。構文 `$( ".selector" ).autocomplete({ delay: 500 });`
4	disabled このオプションが指定され、_true_の場合、自動補完ウィジェットは最初は無効になっています。デフォルトでは、その値は false です。オプション-無効このオプションが指定され、_true_の場合、自動補完ウィジェットは最初は無効になっています。デフォルトでは、その値は false です。構文 `$( ".selector" ).autocomplete({ disabled: true });`
5	minLength 一致する値を取得する前に入力する必要がある文字数（ソースオプションで指定）。これにより、数個の文字ではセットを適切なレベルまで削るには不十分な場合に、大きすぎる値セットが表示されるのを防ぐことができます。デフォルトでは、その値は 1 です。オプション-minLength * 一致する値を取得する前に入力する必要がある文字数（ソースオプションで指定）。これにより、数個の文字ではセットを適切なレベルまで削るには不十分な場合に、大きすぎる値セットが表示されるのを防ぐことができます。デフォルトでは、その値は 1 です。構文 `$( ".selector" ).autocomplete({ minLength: 0 });`
6	position このオプションは、関連する入力要素に対する提案メニューの位置を識別します。 _of_オプションはデフォルトで入力要素に設定されますが、配置する別の要素を指定できます。デフォルトでは、その値は \ {my： "left top"、at： "left bottom"、collision： "none"} です。オプション-位置このオプションは、関連する入力要素に対する提案メニューの位置を識別します。 _of_オプションはデフォルトで入力要素に設定されますが、配置する別の要素を指定できます。デフォルトでは、その値は \ {my： "left top"、at： "left bottom"、collision： "none"} です。構文 `$( ".selector" ).autocomplete({ position: { my : "right top", at: "right bottom" } });`
7	source このオプションは、入力データと一致するデータを取得する方法を指定します。値を指定する必要があります。そうしないと、オートコンプリートウィジェットが作成されません。デフォルトでは、その値は* noneです。指定する必要があります。オプション-ソース* このオプションは、入力データと一致するデータを取得する方法を指定します。値を指定する必要があります。そうしないと、オートコンプリートウィジェットが作成されません。この値は次のいずれかです。一致するデータを返すサーバーリソースのURLを表す String 、値が照合されるローカルデータの配列、または一致する値を提供することからの一般的なコールバックとして機能する関数。構文 `$( ".selector" ).autocomplete({ source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] });`

Sr.No.	Action & Description
1	close このアクションにより、オートコンプリートメニューの候補リストが非表示になります。このメソッドは引数を取りません。アクション-閉じるこのアクションにより、オートコンプリートメニューの候補リストが非表示になります。このメソッドは引数を取りません。構文 `$( ".selector" ).autocomplete("close");`
2	destroy このアクションにより、オートコンプリート機能が削除されます。候補のリストが削除されます。このメソッドは引数を取りません。アクション-破壊このアクションにより、オートコンプリート機能が削除されます。候補のリストが削除されます。このメソッドは引数を取りません。構文 `$( ".selector" ).autocomplete("destroy");`
3	disable このアクションは、オートコンプリートメカニズムを無効にします。候補のリストは表示されなくなりました。このメソッドは引数を取りません。アクション-無効このアクションは、オートコンプリートメカニズムを無効にします。候補のリストは表示されなくなりました。このメソッドは引数を取りません。構文 `$( ".selector" ).autocomplete("disable");`
4	enable このアクションは、オートコンプリートメカニズムを再アクティブ化します。提案のリストが再び表示されます。このメソッドは引数を取りません。アクション-有効このアクションは、オートコンプリートメカニズムを再アクティブ化します。提案のリストが再び表示されます。このメソッドは引数を取りません。構文 `$( ".selector" ).autocomplete("enable");`
5	option( optionName ) このアクションは、指定されたparam _optionName_の値を取得します。このオプションは、オートコンプリートで使用されるオプション（オプション）の1つに対応します。アクション-option（optionName）このアクションは、指定されたparam _optionName_の値を取得します。このオプションは、オートコンプリートで使用されるオプション（オプション）の1つに対応します。構文 `var isDisabled = $( ".selector" ).autocomplete( "option", "disabled" );`
6	option このアクションは、現在のオートコンプリートオプションハッシュを表すキー/値ペアを含むオブジェクトを取得します。アクション-オプションこのアクションは、現在のオートコンプリートオプションハッシュを表すキー/値ペアを含むオブジェクトを取得します。構文 `var options = $( ".selector" ).autocomplete( "option" );`
7	option( optionName, value ) このアクションは、指定された_optionName_に関連付けられたオートコンプリートオプションの値を設定します。引数_optionName_は設定するオプションの名前であり、_value_はオプションに設定する値です。アクション-option（optionName、value）このアクションは、指定された_optionName_に関連付けられたオートコンプリートオプションの値を設定します。引数_optionName_は設定するオプションの名前であり、_value_はオプションに設定する値です。構文 `$( ".selector" ).autocomplete( "option", "disabled", true );`
8	option( options ) このアクションは、オートコンプリートの1つ以上のオプションを設定します。引数_options_は、設定するオプションと値のペアのマップです。アクション-オプション（オプション）このアクションは、オートコンプリートの1つ以上のオプションを設定します。引数_options_は、設定するオプションと値のペアのマップです。構文 `$( ".selector" ).autocomplete( "option", { disabled: true } );`
9	search( [value )] このアクションは、文字列値とデータソース（_options.source_で指定）の間の対応を検索します。値の最小文字数（_options.minLength_で示される）に達する必要があります。そうでない場合、検索は実行されません。アクション-検索（[値]）このアクションは、文字列値とデータソース（_options.source_で指定）の間の対応を検索します。値の最小文字数（_options.minLength_で示される）に達する必要があります。そうでない場合、検索は実行されません。構文 `$( ".selector" ).autocomplete( "search", "" );`
10	widget 提案のリストに対応する<ul> DOM要素を取得します。これは、jQueryセレクターを使用せずにリストに簡単にアクセスできるjQueryクラスのオブジェクトです。アクション-ウィジェット提案のリストに対応する<ul> DOM要素を取得します。これは、jQueryセレクターを使用せずにリストに簡単にアクセスできるjQueryクラスのオブジェクトです。構文 `$( ".selector" ).autocomplete("widget");`

Sr.No.	Event Method & Description
1	change(event, ui) このイベントは、選択に基づいて<input>要素の値が変更されるとトリガーされます。トリガーされると、このイベントは常に_close_イベントがトリガーされた後に発生します。イベント-change（event、ui）このイベントは、選択に基づいて<input>要素の値が変更されるとトリガーされます。トリガーされると、このイベントは常に_close_イベントがトリガーされた後に発生します。ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は- item -メニューから選択されたアイテム（ある場合）。それ以外の場合、プロパティはnullです。構文 `$( ".selector" ).autocomplete({ change: function( event, ui ) {} });`
2	close(event, ui) このイベントは、オートコンプリートメニューが閉じるたびにトリガーされます。イベント-close（event、ui）このイベントは、オートコンプリートメニューが閉じるたびにトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。構文 `$( ".selector" ).autocomplete({ close: function( event, ui ) {} });`
3	create(event, ui) このイベントは、オートコンプリートが作成されるとトリガーされます。イベント-create（event、ui）このイベントは、オートコンプリートが作成されるとトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は- item -メニューから選択されたアイテム（ある場合）。それ以外の場合、プロパティはnullです。構文 `$( ".selector" ).autocomplete({ create: function( event, ui ) {} });`
4	focus(event, ui) このイベントは、メニュー選択の1つがフォーカスを受け取るたびにトリガーされます。キャンセルしない限り（たとえば、falseを返すことによって）、フォーカスされた値は<input>要素に設定されます。イベント-focus（event、ui）このイベントは、メニュー選択の1つがフォーカスを受け取るたびにトリガーされます。キャンセルしない限り（たとえば、falseを返すことによって）、フォーカスされた値は<input>要素に設定されます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は- item -フォーカスされたアイテム。構文 `$( ".selector" ).autocomplete({ focus: function( event, ui ) {} });`
5	open(event, ui) このイベントは、データが準備され、メニューが開かれる直前にトリガーされます。イベント-open（event、ui）このイベントは、データが準備され、メニューが開かれる直前にトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。構文 `$( ".selector" ).autocomplete({ open: function( event, ui ) {} });`
6	response(event, ui) このイベントは、検索が完了した後、メニューが表示される前にトリガーされます。このイベントは、検索結果が存在しないか、オートコンプリートが無効になっているためにメニューが表示されない場合でも、検索が完了すると常にトリガーされます。イベント-応答（イベント、UI）このイベントは、検索が完了した後、メニューが表示される前にトリガーされます。このイベントは、検索結果が存在しないか、オートコンプリートが無効になっているためにメニューが表示されない場合でも、検索が完了すると常にトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は- content -応答データが含まれており、表示される結果を変更するために変更できます。構文 `$( ".selector" ).autocomplete({ response: function( event, ui ) {} });`
7	search(event, ui) このイベントは、_delay_および_minLength_基準が満たされた後、sourceで指定されたメカニズムがアクティブになる直前にトリガーされます。キャンセルされた場合、検索操作は中止されます。イベント-検索（イベント、UI）このイベントは、_delay_および_minLength_基準が満たされた後、sourceで指定されたメカニズムがアクティブになる直前にトリガーされます。キャンセルされた場合、検索操作は中止されます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。構文 `$( ".selector" ).autocomplete({ search: function( event, ui ) {} });`
8	select(event, ui) このイベントは、オートコンプリートメニューから値が選択されるとトリガーされます。このイベントをキャンセルすると、値が<input>要素に設定されなくなります（ただし、メニューが閉じるのを防ぎません）。イベント-select（event、ui）このイベントは、オートコンプリートメニューから値が選択されるとトリガーされます。このイベントをキャンセルすると、値が<input>要素に設定されなくなります（ただし、メニューが閉じるのを防ぎません）。ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は- item -選択したオプションのラベルと値のプロパティを持つオブジェクト。構文 `$( ".selector" ).autocomplete({ select: function( event, ui ) {} });`

Jqueryui-autocomplete

目次

JqueryUI-オートコンプリート

構文

$（セレクター、コンテキスト）.autocomplete（オプション）メソッド

構文

デフォルトの機能

autoFocusの使用

minLengthと遅延の使用

ラベルの使用

外部ソースの使用

$（セレクター、コンテキスト）.autocomplete（ "action"、params）メソッド

構文

例

拡張ポイント

オートコンプリート要素のイベント管理

例