JqueryUI-オートコンプリート

オートコンプリートは、最近のWebサイトで頻繁に使用されるメカニズムであり、ユーザーがテキストボックスに入力した単語の先頭の候補のリストをユーザーに提供します。次に、ユーザーはリストから項目を選択できます。これは入力フィールドに表示されます。この機能により、ユーザーは単語全体または単語のセットを入力する必要がなくなります。

JQueryUIは、オートコンプリートウィジェットを提供します。これは、<select>ドロップダウンのように機能するコントロールですが、ユーザーがコントロールに入力しているものと一致するものだけを表示するように選択肢をフィルタリングします。jQueryUIはautocomplete() 入力フィールドの下に提案のリストを作成し、関連する要素に新しいCSSクラスを追加して、適切なスタイルを与えるメソッド。

入力を受け取ることができるすべてのフィールドは、オートコンプリートに変換できます。つまり、 <input>要素、 <textarea>要素、およびcontenteditable属性を持つ要素です。

構文

ザ・ autocomplete() メソッドは2つの形式で使用できます-

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

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

オートコンプリート（オプション）メソッドは、HTMLの<input>要素は、提案のリストの上に表示される入力フィールドとして管理しなければならないことを宣言します。オプションユーザーが入力フィールドに入力している提案のリストの動作を指定したオブジェクトであるパラメータ。

構文

$(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" ] });

シニア番号	オプションと説明
1	appendTo このオプションは、メニューに要素を追加するために使用されます。デフォルトでは、その値はnull。 Option - appendTo このオプションは、メニューに要素を追加するために使用されます。デフォルトでは、その値はnull。値がnullの場合、入力フィールドの親はui-frontのクラスについてチェックされます。ui-frontクラスの要素が見つかった場合、メニューはその要素に追加されます。 Syntax `$( ".selector" ).autocomplete({ appendTo: "#identifier" });`
2	autoFocus このオプションをtrueに設定すると、メニューが表示されたときにメニューの最初の項目が自動的にフォーカスされます。デフォルトでは、その値はfalse。 Option - autoFocus このオプションをtrueに設定すると、メニューが表示されたときにメニューの最初の項目が自動的にフォーカスされます。デフォルトでは、その値はfalse。 Syntax `$( ".selector" ).autocomplete({ autoFocus: true });`
3	ディレイこのオプションは、（ソースオプションで指定された）一致する値を取得する前に待機するミリ秒数を表す整数です。これは、検索が開始される前にユーザーにさらに文字を入力する時間を与えることにより、非ローカルデータが取得されているときのスラッシングを減らすのに役立ちます。デフォルトでは、その値は300。 Option - delay このオプションは、（ソースオプションで指定された）一致する値を取得する前に待機するミリ秒数を表す整数です。これは、検索が開始される前にユーザーにさらに文字を入力する時間を与えることにより、非ローカルデータが取得されているときのスラッシングを減らすのに役立ちます。デフォルトでは、その値は300。 Syntax `$( ".selector" ).autocomplete({ delay: 500 });`
4	無効このオプションを指定してtrueにすると、オートコンプリートウィジェットは最初は無効になります。デフォルトでは、その値はfalse。 Option - disabled このオプションを指定してtrueにすると、オートコンプリートウィジェットは最初は無効になります。デフォルトでは、その値はfalse。 Syntax `$( ".selector" ).autocomplete({ disabled: true });`
5	minLength 一致する値を取得する前に入力する必要のある文字数（ソースオプションで指定）。これにより、数文字ではセットを妥当なレベルにまで下げるのに十分でない場合に、大きすぎる値セットが表示されるのを防ぐことができます。デフォルトでは、その値は1。 Option - minLength 一致する値を取得する前に入力する必要のある文字数（ソースオプションで指定）。これにより、数文字ではセットを妥当なレベルにまで下げるのに十分でない場合に、大きすぎる値セットが表示されるのを防ぐことができます。デフォルトでは、その値は1。 Syntax `$( ".selector" ).autocomplete({ minLength: 0 });`
6	ポジションこのオプションは、関連する入力要素に対する提案メニューの位置を識別します。入力要素にオプションのデフォルトが、あなたは反対の位置に別の要素を指定することができます。デフォルトでは、その値は{ my: "left top", at: "left bottom", collision: "none" }。 Option - position このオプションは、関連する入力要素に対する提案メニューの位置を識別します。入力要素にオプションのデフォルトが、あなたは反対の位置に別の要素を指定することができます。デフォルトでは、その値は{ my: "left top", at: "left bottom", collision: "none" }。 Syntax `$( ".selector" ).autocomplete({ position: { my : "right top", at: "right bottom" } });`
7	ソースこのオプションは、入力データと一致するデータを取得する方法を指定します。値を指定する必要があります。指定しないと、オートコンプリートウィジェットが作成されません。デフォルトでは、その値はnone; must be specified。 Option - source このオプションは、入力データと一致するデータを取得する方法を指定します。値を指定する必要があります。指定しないと、オートコンプリートウィジェットが作成されません。この値は次のようになります。 String 一致するデータを返すサーバーリソースのURLを表します。 an array 値が一致するローカルデータの a function これは、一致する値を提供することによる一般的なコールバックとして機能します。 Syntax `$( ".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.htmjavascriptをサポートする標準のブラウザで開くと、次の出力が表示されます。今、あなたは結果で遊ぶことができます-

autoFocusの使用

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

<!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.htmjavascriptをサポートする標準のブラウザで開くと、次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

minLengthとdelayの使用

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

<!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>

ラベルの使用

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

<!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>

外部ソースの使用

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

<!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ファイルは、上記のファイル（autocompleteexample.html）と同じ場所に配置されます。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 );
?>

たとえば、ja、scなどの2文字の単語を入力します

$（selector、context）.autocomplete（ "action"、params）メソッド

オートコンプリート（「アクション」の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");

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

拡張ポイント

オートコンプリートウィジェットは、ウィジェットファクトリで構築されたものとして拡張できます。ウィジェットを拡張する場合、既存のメソッドの動作をオーバーライドまたは追加することができます。次の表に、上記のプラグインメソッドと同じAPI安定性を備えた拡張ポイントとして機能するメソッドを示します。

シニア番号	方法と説明
1	_renderItem（ul、item）このメソッドは、ウィジェットのメニューの各オプションの作成を制御します。このメソッドは、新しい<li>要素を作成し、それをメニューに追加して返します。 _renderItem( ul, item ) このメソッドは、ウィジェットのメニューの各オプションの作成を制御します。このメソッドは、新しい<li>要素を作成し、それをメニューに追加して返します。ここで- <ul> 新しく作成された<li>要素に追加する必要がある要素です。 item することができるラベル（文字列）、アイテムに表示される文字列、または値（文字列）、アイテムが選択された入力に挿入する値。
2	_renderMenu（ul、items）このメソッドは、ウィジェットのメニューの作成を制御します。 _renderMenu( ul, items ) このメソッドは、ウィジェットのメニューの作成を制御します。ここで- <ul>ユーザーが入力した用語に一致するアイテムの配列です。各アイテムは、ラベルと値のプロパティを持つオブジェクトです。
3	_resizeMenu（）このメソッドは、メニューが表示される前のサイズを制御します。menu要素はthis.menu.elementで利用できます。このメソッドは引数を受け入れません。 _resizeMenu() このメソッドは、メニューが表示される前のサイズを制御します。menu要素は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 ) {}
});

シニア番号	イベントの方法と説明
1	change（event、ui）このイベントは、選択に基づいて<input>要素の値が変更されたときにトリガーされます。トリガーされると、このイベントは常にクローズイベントがトリガーされた後に発生します。 Event - change(event, ui) このイベントは、選択に基づいて<input>要素の値が変更されたときにトリガーされます。トリガーされると、このイベントは常にクローズイベントがトリガーされた後に発生します。ここで、eventはEvent型であり、uiはObject型です。uiの可能な値は次のとおりです。 item−メニューから選択された項目（ある場合）。それ以外の場合、プロパティはnullです。 Syntax `$( ".selector" ).autocomplete({ change: function( event, ui ) {} });`
2	close（event、ui）このイベントは、オートコンプリートメニューが閉じるたびにトリガーされます。 Event - close(event, ui) このイベントは、オートコンプリートメニューが閉じるたびにトリガーされます。ここで、eventはEvent型であり、uiはObject型です。 Syntax `$( ".selector" ).autocomplete({ close: function( event, ui ) {} });`
3	create（event、ui）このイベントは、オートコンプリートが作成されたときにトリガーされます。 Event - create(event, ui) このイベントは、オートコンプリートが作成されたときにトリガーされます。イベントのタイプはEventで、uiのタイプはObjectです。uiの可能な値は次のとおりです。 item−メニューから選択された項目（ある場合）。それ以外の場合、プロパティはnullです。 Syntax `$( ".selector" ).autocomplete({ create: function( event, ui ) {} });`
4	focus（event、ui）このイベントは、メニューの選択肢の1つがフォーカスを受け取るたびにトリガーされます。キャンセルされない限り（たとえば、falseを返すことによって）、フォーカスされた値は<input>要素に設定されます。 Event - focus(event, ui) このイベントは、メニューの選択肢の1つがフォーカスを受け取るたびにトリガーされます。キャンセルされない限り（たとえば、falseを返すことによって）、フォーカスされた値は<input>要素に設定されます。ここで、eventはEvent型であり、uiはObject型です。uiの可能な値は次のとおりです。 item −フォーカスされたアイテム。 Syntax `$( ".selector" ).autocomplete({ focus: function( event, ui ) {} });`
5	open（event、ui）このイベントは、データの準備が整い、メニューが開こうとしているときにトリガーされます。 Event - open(event, ui) このイベントは、データの準備が整い、メニューが開こうとしているときにトリガーされます。ここで、eventはEvent型であり、uiはObject型です。 Syntax `$( ".selector" ).autocomplete({ open: function( event, ui ) {} });`
6	response（event、ui）このイベントは、検索が完了した後、メニューが表示される前にトリガーされます。このイベントは、検索結果がないかオートコンプリートが無効になっているためにメニューが表示されない場合でも、検索が完了すると常にトリガーされます。 Event - response(event, ui) このイベントは、検索が完了した後、メニューが表示される前にトリガーされます。このイベントは、検索結果がないかオートコンプリートが無効になっているためにメニューが表示されない場合でも、検索が完了すると常にトリガーされます。ここで、eventはEvent型であり、uiはObject型です。uiの可能な値は次のとおりです。 content −応答データが含まれており、表示される結果を変更するために変更できます。 Syntax `$( ".selector" ).autocomplete({ response: function( event, ui ) {} });`
7	search（event、ui）このイベントは、遅延とminLength基準が満たされた後、ソースで指定されたメカニズムがアクティブ化される直前にトリガーされます。キャンセルされた場合、検索操作は中止されます。 Event - search(event, ui) このイベントは、遅延とminLength基準が満たされた後、ソースで指定されたメカニズムがアクティブ化される直前にトリガーされます。キャンセルされた場合、検索操作は中止されます。ここで、eventはEvent型であり、uiはObject型です。 Syntax `$( ".selector" ).autocomplete({ search: function( event, ui ) {} });`
8	select（event、ui）このイベントは、オートコンプリートメニューから値が選択されたときにトリガーされます。このイベントをキャンセルすると、値が<input>要素に設定されなくなります（ただし、メニューが閉じられるのを防ぐことはできません）。 Event - select(event, ui) このイベントは、オートコンプリートメニューから値が選択されたときにトリガーされます。このイベントをキャンセルすると、値が<input>要素に設定されなくなります（ただし、メニューが閉じられるのを防ぐことはできません）。ここで、eventはEvent型であり、uiはObject型です。uiの可能な値は次のとおりです。 item −選択したオプションのラベルと値のプロパティを持つオブジェクト。 Syntax `$( ".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" ).html( 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.htmjavascriptをサポートする標準のブラウザで開きます。次の出力も表示する必要があります-

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

シニア番号	方法と説明
1	_renderItem（ul、item）このメソッドは、ウィジェットのメニューの各オプションの作成を制御します。このメソッドは、新しい<li>要素を作成し、それをメニューに追加して返します。 _renderItem( ul, item ) このメソッドは、ウィジェットのメニューの各オプションの作成を制御します。このメソッドは、新しい<li>要素を作成し、それをメニューに追加して返します。ここで- <ul> 新しく作成された<li>要素に追加する必要がある要素です。 item することができるラベル（文字列）、アイテムに表示される文字列、または値（文字列）、アイテムが選択された入力に挿入する値。
2	_renderMenu（ul、items）このメソッドは、ウィジェットのメニューの作成を制御します。 _renderMenu( ul, items ) このメソッドは、ウィジェットのメニューの作成を制御します。ここで- <ul>ユーザーが入力した用語に一致するアイテムの配列です。各アイテムは、ラベルと値のプロパティを持つオブジェクトです。
3	_resizeMenu（）このメソッドは、メニューが表示される前のサイズを制御します。menu要素はthis.menu.elementで利用できます。このメソッドは引数を受け入れません。 _resizeMenu() このメソッドは、メニューが表示される前のサイズを制御します。menu要素はthis.menu.elementで利用できます。このメソッドは引数を受け入れません。

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