jQueryのUIの例 - 自動（オートコンプリート）
ユーザーはすぐに見つけて、プリセット値のリストから選択することができ、ユーザーの入力に基づいて値を検索し、フィルタ。
オートコンプリートコンポーネントの詳細については、APIドキュメントを参照してください。 自動的にメンバー（オートコンプリートウィジェットを） 。
このセクションを使用して、ダウンロードをsearch.php 。
デフォルトの機能
あなたが入力フィールド、自動的に行われた場合（オートコンプリート）メンバーがアドバイスを提供します。 この例では、推奨オプションプログラミング言語が提供され、あなたが入力することができ、「JA」はそれを試して、あなたは、JavaまたはJavaScriptを得ることができます。
データソースはオプションがメンバーに利用可能であるソースを使用して、簡単なJavaScriptの配列です。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUI自動補完（オートコンプリート） - デフォルトの機能</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スクリプト>
$（関数（）{
するvar availableTagsの= [
「ActionScriptの」、
「アップルスクリプト」、
「ASP」、
「BASIC」、
「C」、
「C ++」、
「Clojureの "、
「COBOL」、
「ColdFusionの "、
「アーラン」、
「Fortranの "、
「グルービー」、
「ハスケル」、
「Java」、
「JavaScriptの」、
"Lispの"、
「Perlの "、
「PHP」、
「パイソン」、
「ルビー」、
「スカラ座」、
「スキーム」
];
$（ "#tags」）.autocomplete（{
ソース：availableTags
}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<DIVクラス= "UIウィジェット">
<= "タグ"のラベル>タグ：</ label>は
<入力されたID = "タグ">
</ DIV>
</ BODY>
</ HTML>
アクセントのあります
テキストフィールドがアクセント付き文字が含まれていない場合でも、アクセント記号付きの項目に一致するように結果をカスタマイズするために、ソースオプションを使用してオートコンプリートのフィールドが一致します。 あなたがテキストフィールドにアクセント付き文字を入力した場合でも、それは非ストレス項目の結果が表示されません。
「ジョー」と入力してみてください、あなたはその後、「ジョー」と入力し、「ジョン」と「ジョーン」を参照してください、だけ「ジョーン」を参照してくださいます。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIの自動補完（オートコンプリート） - アクセント</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スクリプト>
$（関数（）{
VAR名= [ "のJörnZaefferer」、「スコット・ゴンサレス"、 "ジョンResig氏"];
するvar accentMap = {
「A」：「A」、
"O"： "O"
};
するvarノーマライズ=関数（用語）{
するvar RET = "";
以下のために（VAR I = 0; iはterm.lengthを<;私は++）{
RET + = accentMap [term.charAt（I）] || term.charAt（ⅰ）;
}
RETを返します。
};
$（ "#developer」）.autocomplete（{
ソース：関数（リクエスト、レスポンス）{
VARマッチャ=新しいRegExpオブジェクト（$ .ui.autocomplete.escapeRegex（request.term）、 "I"）;
応答（$ .grep（名前、関数（値）{
値= value.label || value.value ||値。
（（値）を正規化）|| matcher.test（値）matcher.testを返します。
}））。
}
}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<DIVクラス= "UIウィジェット">
<フォーム>
<= "開発者"のラベル>開発者：</ label>は
<入力されたID = "開発者">
</フォーム>
</ DIV>
</ BODY>
</ HTML>
分類
検索結果の分類。 「A」または「n」を入力してみてください。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIの自動補完（オートコンプリート） - カテゴリ</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スタイル>
.ui-オートコンプリートカテゴリ{
フォント重量：太字;
パディング：.2em .4em。
マージン：.8em 0 .2em。
行の高さ：1.5;
}
</スタイル>
<スクリプト>
$ .widget（「Custom.catcomplete "、$ .ui.autocomplete、{
_renderMenu：関数（UL、アイテム）{
これを= VAR、
currentCategory = "";
の$ .each（アイテム、機能（インデックス、項目）{
{（currentCategory！item.category =）の場合
ul.append（ "<李クラス= 'UI-オートコンプリート-カテゴリ'>" + item.category + "</ LI>"）;
currentCategory = item.category。
}
that._renderItemData（UL、アイテム）。
}）;
}
}）;
</スクリプト>
<スクリプト>
$（関数（）{
VARデータ= [
{レーベル：「アンダース」、カテゴリ： ""}、
{レーベル： "アンドレアス」、カテゴリ：" "}、
{レーベル： "アンタル」、カテゴリ：" "}、
{レーベル：「annhhx10」、カテゴリ： "製品"}、
{レーベル：「annkのK12」、カテゴリ： "製品"}、
{レーベル：「annttop C13」、カテゴリ： "製品"}、
{レーベル：「アンダース・アンダーソン」、カテゴリ： "人々"}、
{レーベル：「アンドレアス・アンデション」、カテゴリ： "人々"}、
{レーベル：「アンドレアス・ジョンソン」、カテゴリ： "人々"}
];
$（ "#search」）.catcomplete（{
遅延：0、
ソース：データ
}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
検索<= "検索"のラベル>：</ label>を
<入力されたID = "検索">
</ BODY>
</ HTML>
コンボボックス（コンボボックス）
オートコンプリートとボタンが作成したカスタムコンポーネント。 あなたは、入力フィルタリング結果に基づいて取得するいくつかの文字を入力するか、ボタンを使用して完全なリストから選択することができます。
入力ソースをカスタマイズするオートコンプリートオプションに渡された、既存の選択要素から読み込まれます。
これはサポートされていない完璧なメンバーではありません。 ここでオートコンプリートカスタマイズ機能を発揮するだけです。 この部分の動作の詳細については、jQueryの記事を表示するのには、ここをクリックしてください。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIの自動補完（オートコンプリート） - コンボボックス（コンボボックス）</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スタイル>
.custom-コンボボックス{
位置：相対;
表示：インラインブロック;
}
.custom-コンボボックス、トグル{
位置：絶対;
トップ：0;
ボトム：0;
余白左：-1px;
パディング：0;
/ *サポート：IE7 * /
*高さ：1.7em;
*トップ：0.1em;
}
.custom-コンボボックス、入力{
マージン：0;
パディング：0.3em;
}
</スタイル>
<スクリプト>
（関数（$）{
$の.widget（「Custom.combobox "、{
_CREATE：関数（）{
this.wrapper = $（ "<スパン>"）
.addClass（「カスタムコンボボックス」）
.insertAfter（this.element）。
this.element.hide（）。
this._createAutocomplete（）。
this._createShowAllButton（）。
}、
_createAutocomplete：関数（）{
（ "：選択"）、VAR選択=のthis.element.children
値= selected.val（）selected.text（）： "";？
this.input = $（ "<入力>"）
.appendTo（this.wrapper）
.val（値）
.ATTR（ "タイトル"、 ""）
.addClass（「カスタムコンボボックス入力UIウィジェットUIウィジェットコンテンツのUIステートのデフォルトUI-コーナー左」）
.autocomplete（{
遅延：0、
minLength：0、
ソース：$ .proxy（この、 "_source」）
}）
.tooltip（{
tooltipClass：「UI-状態-ハイライト」
}）;
this._on（this.input、{
autocompleteselect：機能（イベント、UI）{
ui.item.option.selected =はtrue。
this._trigger（「選択」、イベント、{
アイテム：ui.item.option
}）;
}、
autocompletechange：「_removeIfInvalid "
}）;
}、
_createShowAllButton：関数（）{
VAR入力= this.input、
wasOpen = falseは、
$（ "<A>」）
.ATTR（「tabIndexに "、-1）
.ATTR（「タイトル」、「表示全てのアイテムを "）
.tooltip（）
.appendTo（this.wrapper）
.button（{
アイコン：{
プライマリー：「UI-アイコン・三角形1-S」
}、
テキスト：偽
}）
.removeClass（「UI-コーナーすべて」）
.addClass（「カスタムコンボボックス、トグルUI-コーナー右」）
.mousedown（関数（）{
wasOpen = input.autocomplete（「ウィジェット」）（「可視」）.is。
}）
.click（関数（）{
input.focus（）。
//あなたは閉じている見ている場合であれば（wasOpen）{
返します。
}
//すべての結果のinput.autocomplete（「検索」、「」）を示す、検索の値として空の文字列を渡します。
}）;
}、
_source：関数（リクエスト、レスポンス）{
VARマッチャ=新しいRegExpオブジェクト（$ .ui.autocomplete.escapeRegex（request.term）、 "I"）;
応答（this.element.children（ "オプション"）の.map（関数（）{
VARテキスト= $（この）は.text（）;
（this.value &&（！request.term || matcher.test（テキスト）））の場合
リターン{
ラベル：テキスト、
値：テキスト、
オプション：この
};
}））。
}、
_removeIfInvalid：機能（イベント、UI）{
//項目を選択し、（ui.item）場合は他のアクションを実行しません{
返します。
}
//マッチを検索する（大文字と小文字を区別しません）
this.input.valのvar値=（）、
valueLowerCase = value.toLowerCase（）、
有効= falseは、
this.element.children（ "オプション"）.each（関数（）{
場合（$（この）は.text（）。toLowerCaseメソッド（）=== valueLowerCase）{
this.selected =有効=はtrue。
falseを返します。
}
}）;
一致するものが見つかった//は、他のアクションの場合（有効）{
返します。
}
//無効な値を削除しthis.input
.val（ ""）
.ATTR（「タイトル」、値が+ "任意の項目を一致しませんでした」）
.tooltip（「オープン」）。
this.element.val（ ""）。
this._delay（関数（）{
this.input.tooltip（「クローズ」）.ATTR（ "タイトル"、 ""）;
}、2500）;
this.input.data（「UI-オートコンプリート」）.term = "";
}、
_destroy：関数（）{
this.wrapper.remove（）。
this.element.show（）。
}
}）;
}）（jQueryの）;
$（関数（）{
$（ "#combobox」）.combobox（）;
$（ "#toggle"）.click（関数（）{
$（ "#combobox」）.toggle（）;
}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<DIVクラス= "UIウィジェット">
<ラベル>あなたの好きなプログラミング言語：</ label>は
<選択のid = "コンボボックス">
<オプション値= ""> </ option>を選択...
<オプション値= "ActionScriptの"> ActionScriptの</オプション>
<オプション値= "AppleScriptの"> AppleScriptを</オプション>
<オプション値=「ASP ">のAsp </オプション>
<オプション値= "BASIC"> BASIC </オプション>
<オプション値= "C"> C </オプション>
<オプション値= "C ++"> C ++ </オプション>
<オプション値= "Clojureの"> Clojureの</オプション>
<オプション値= "COBOL"> COBOL </オプション>
<オプション値= "ColdFusionの"> ColdFusionの</オプション>
<オプション値= "アーラン">アーラン</オプション>
<オプション値= "Fortranの">のFortran </オプション>
<オプション値= "グルーヴィー">グルービー</オプション>
<オプション値= "ハスケル">ハスケル</オプション>
<オプション値= "Javaの">のJava </オプション>
<オプション値= "JavaScriptを"> JavaScriptを</オプション>
<オプション値= "Lispの"> Lispの</オプション>
<オプション値= "Perlの"> Perlの</オプション>
<オプション値= "PHP"> PHP </オプション>
<オプション値= "パイソン"> Pythonの</オプション>
<オプション値= "ルビー">ルビー</オプション>
<オプション値= "スカラ">スカラ</オプション>
<オプション値= "スキーム">スキーム</オプション>
</選択>
</ DIV>
<ボタンのid = "トグル">表示に基づく選択ボックス</ button>の
</ BODY>
</ HTML>
カスタムデータと表示
カスタムデータ形式を使用して、単純に着目して、デフォルトの動作をオーバーライドして、データを表示するように選択することができます。
あなたが項目のリストを取得することができ、「J」を入力してみてください、または下矢印キーを押してください。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIの自動補完（オートコンプリート） - カスタムデータおよびディスプレイ</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スタイル>
＃プロジェクトラベル{
表示：ブロック;
フォント重量：太字;
マージン底：1EM。
}
＃プロジェクトアイコン{
フロート：左;
高さ：32PX;
幅：32PX;
}
＃プロジェクトの説明{
マージン：0;
パディング：0;
}
</スタイル>
<スクリプト>
$（関数（）{
varの各プロジェクト= [
{
値： "jqueryの"、
ラベル： "jQueryの"、
DESC：「書き込みが少なく、複数の操作を行い、JavaScriptライブラリ」、
アイコン：「jquery_32x32.png "
}、
{
値：「jqueryの-UI」、
ラベル：「jQueryのUI」、
DESC：「jQueryのための公式のユーザー・インターフェース・ライブラリー」、
アイコン：「jqueryui_32x32.png "
}、
{
値：「sizzlejs」、
ラベル：「シズルJS」、
DESC：「純粋なJavaScriptのCSSセレクタエンジン」、
アイコン：「sizzlejs_32x32.png "
}
];
$（ "#project」）.autocomplete（{
minLength：0、
ソース：プロジェクト、
焦点：機能（イベント、UI）{
$（ "#project」）.val（Ui.item.label）。
falseを返します。
}、
選択：機能（イベント、UIを）{
$（ "#project」）.val（Ui.item.label）。
$（ "＃プロジェクト-ID」）.val（ui.item.value）。
$（ "＃プロジェクトの説明」）の.html（ui.item.desc）。
$（ "＃プロジェクトアイコン」）.ATTR（「SRC」、「画像/" + ui.item.icon）。
falseを返します。
}
}）
.dataの（「UI-オートコンプリート」）._のRenderItem =関数（UL、アイテム）{
$を返します（ "<LI>"）
.append（「<A> "+ item.label +「<BR>」+ item.desc +" </a>を」）
.appendTo（UL）。
};
}）;
</スクリプト>
</ HEAD>
<ボディ>
<DIV ID = "プロジェクトラベル">項目（タイプ「J」）を選択します。</ div>の
<IMGのID = "プロジェクト・アイコン" SRC = "画像/ transparent_1x1.png"クラス= "UI-状態-デフォルトの" ALT = "">
<入力のid = "プロジェクト">
<入力タイプ= "隠された" ID = "プロジェクトID">
<Pのid = "プロジェクトの説明"> </ P>
</ BODY>
</ HTML>
多値
使用法：あなたは、関連するプログラミング言語の結果を見ることができ、そのような「J」のように、一部の文字を入力します。 値を選択し、付加価値を追加していく文字を入力します。
この例では、複数の自動を入力するために単一のテキストフィールドの値に達成するためにソースオプションとイベントを使用する方法を示します。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIの自動補完（オートコンプリート） - 複数の値</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スクリプト>
$（関数（）{
するvar availableTagsの= [
「ActionScriptの」、
「アップルスクリプト」、
「ASP」、
「BASIC」、
「C」、
「C ++」、
「Clojureの "、
「COBOL」、
「ColdFusionの "、
「アーラン」、
「Fortranの "、
「グルービー」、
「ハスケル」、
「Java」、
「JavaScriptの」、
"Lispの"、
「Perlの "、
「PHP」、
「パイソン」、
「ルビー」、
「スカラ座」、
「スキーム」
];
機能分割（val）で{
val.splitを返す（/、\ sの* /）;
}
機能extractLast（用語）{
リターンスプリット（用語）.pop（）;
}
$（ "#tags」）
//テキストフィールドの.bind（ "keydownイベント」、関数（イベント）{残さずに項目を選択すると
（event.keyCode === $ .ui.keyCode.TAB場合&&
$（この）.dataセクション（「UI-オートコンプリート」）.menu.active）{
event.preventDefault（）;
}
}）
.autocomplete（{
minLength：0、
ソース：関数（リクエスト、レスポンス）{
//戻るオートコンプリートは、しかし、（最後のエントリ応答（$の.ui.autocomplete.filterを抽出します
availableTags、extractLast（request.term）））;
}、
焦点：関数（）{
//防ぐには、挿入値がfalseを返すフォーカスを取得します。
}、
選択：機能（イベント、UIを）{
varの各条項=スプリット（this.value）;
//）（現在の入力terms.popを削除します。
//選択したオプションterms.push（ui.item.value）を追加します。
// +スペースterms.push（ ""）の末尾にカンマを追加し、プレースホルダを追加します。
this.value = terms.join（ "、"）;
falseを返します。
}
}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<DIVクラス= "UIウィジェット">
プログラミング言語<= "タグ"のラベル>：</ label>は
<入力されたID = "タグ"サイズ= "50">
</ DIV>
</ BODY>
</ HTML>
複数の値を、リモート
使用法：鳥の名前を取得するために、少なくとも2つの文字を入力してください。 値を選択し、付加価値を追加していく文字を入力します。
この例では、複数の自動を入力するために単一のテキストフィールドの値に達成するためにソースオプションとイベントを使用する方法を示します。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIの自動補完（オートコンプリート） - 複数の値は、リモート</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スタイル>
.ui-オートコンプリートローディング{
背景：白のurl（ '画像/ UI-anim_basic_16x16.gif'）右中央ノー・リピート。
}
</スタイル>
<スクリプト>
$（関数（）{
機能分割（val）で{
val.splitを返す（/、\ sの* /）;
}
機能extractLast（用語）{
リターンスプリット（用語）.pop（）;
}
$（ "#birds」）
//テキストフィールドの.bind（ "keydownイベント」、関数（イベント）{残さずに項目を選択すると
（event.keyCode === $ .ui.keyCode.TAB場合&&
$（この）.dataセクション（「UI-オートコンプリート」）.menu.active）{
event.preventDefault（）;
}
}）
.autocomplete（{
ソース：関数（リクエスト、レスポンス）{
$ .getJSON（「Search.php "、{
用語：extractLast（request.term）
}、応答）;
}、
検索：関数（）{
//カスタム最小長のvar用語= extractLast（this.value）;
場合（term.length <2）{
falseを返します。
}
}、
焦点：関数（）{
//防ぐには、挿入値がfalseを返すフォーカスを取得します。
}、
選択：機能（イベント、UIを）{
varの各条項=スプリット（this.value）;
//）（現在の入力terms.popを削除します。
//選択したオプションterms.push（ui.item.value）を追加します。
// +スペースterms.push（ ""）の末尾にカンマを追加し、プレースホルダを追加します。
this.value = terms.join（ "、"）;
falseを返します。
}
}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<DIVクラス= "UIウィジェット">
<= "鳥"のラベル>バード：</ label>は
<入力のid = "鳥"サイズ= "50">
</ DIV>
</ BODY>
</ HTML>
リモート・データ・ソースJSONP
あなたがテキストフィールドに文字を入力すると、オートコンプリートコンポーネントがアドバイス結果を与えます。 あなたがテキストフィールドに少なくとも2文字を入力すると、この例では、それは、関連する都市の名前が表示されます。
この例では、データソースであるgeonames.org Webサービス 。 要素の後にテキストフィールドの選択は、都市の名前ですが、正しいエントリを見つけるために多くの情報を表示しますが。 また、データは、結果を以下のボックスに表示され、コールバックすることができます。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIの自動補完（オートコンプリート） - JSONPリモート・データ・ソース</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スタイル>
.ui-オートコンプリートローディング{
背景：白のurl（ '画像/ UI-anim_basic_16x16.gif'）右中央ノー・リピート。
}
#city {幅：25em;}
</スタイル>
<スクリプト>
$（関数（）{
関数log（メッセージ）{
$（ "<DIV>"）は.text（メッセージ）.prependTo（「#log "）;
$（ "#log」）.scrollTop（0）;
}
$（ "#city」）.autocomplete（{
ソース：関数（リクエスト、レスポンス）{
$アヤックス（{
URL： "http://ws.geonames.org/searchJSON」、
データ型：「JSONP」、
データ：{
フィーチャクラス：「P」、
スタイル：「フル」、
maxRows：12、
name_startsWith：request.term
}、
成功：関数（データ）{
応答（$の.map（data.geonames、機能（アイテム）{
リターン{
ラベル：item.name +（item.adminName1 "、" + item.adminName1：？ ""）+ "、" + item.countryName、
値：item.name
}
}））。
}
}）;
}、
minLength：2、
選択：機能（イベント、UIを）{
ログイン（ui.item？
「選択した： "+ ui.item.label：
）+ this.value "何も選択していない、入力がありました」。
}、
開く：関数（）{
$（この）.removeClass（「UI-コーナーすべて」）.addClass（「UI-コーナートップ "）;
}、
クローズ：関数（）{
$（この）.removeClass（「UI-コーナートップ」）.addClass（「UI-コーナーすべて "）;
}
}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<DIVクラス= "UIウィジェット">
<= "都市"のラベル>あなたの街：</ label>は
<入力されたID = "都市">
<aのhref="http://geonames.org"のtarget="_blank">によって供給geonames.orgします</a>
</ DIV>
<DIVクラス= "UIウィジェット"スタイル= "マージントップ：2EM;フォントファミリ：Arialの">
結果：
<DIVのID = "ログイン"スタイル= "高さ：200pxの;幅：300ピクセル;オーバーフロー：自動;"クラス= "UI-ウィジェットコンテンツ"> </ div>の
</ DIV>
</ BODY>
</ HTML>
リモート・データ・ソース
あなたがテキストフィールドに文字を入力すると、オートコンプリートコンポーネントがアドバイス結果を与えます。 あなたがテキストフィールドに少なくとも2文字を入力すると、この例では、それは鳥の関連する名前が表示されます。
この例では、データ・ソースは、単純なソースのオプションを指定するためにJSONデータ・サーバ側スクリプトを返します。 また、はminLengthオプションは、クエリを回避するために、2に設定されている非常に多くの結果を返し、いくつかのフィードバックを表示するイベントを選択します。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIの自動補完（オートコンプリート） - リモート・データ・ソース</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スタイル>
.ui-オートコンプリートローディング{
背景：白のurl（ '画像/ UI-anim_basic_16x16.gif'）右中央ノー・リピート。
}
</スタイル>
<スクリプト>
$（関数（）{
関数log（メッセージ）{
$（ "<DIV>"）は.text（メッセージ）.prependTo（「#log "）;
$（ "#log」）.scrollTop（0）;
}
$（ "#birds」）.autocomplete（{
ソース：「search.php」、
minLength：2、
選択：機能（イベント、UIを）{
ログイン（ui.item？
「選択した： "+ ui.item.value +"別名 "+ ui.item.id：
）+ this.value "何も選択していない、入力がありました」。
}
}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<DIVクラス= "UIウィジェット">
<= "鳥"のラベル>バード：</ label>は
<入力されたID = "鳥">
</ DIV>
<DIVクラス= "UIウィジェット"スタイル= "マージントップ：2EM;フォントファミリ：Arialの">
結果：
<DIVのID = "ログイン"スタイル= "高さ：200pxの;幅：300ピクセル;オーバーフロー：自動;"クラス= "UI-ウィジェットコンテンツ"> </ div>の
</ DIV>
</ BODY>
</ HTML>
リモート・キャッシュ
あなたがテキストフィールドに文字を入力すると、オートコンプリートコンポーネントがアドバイス結果を与えます。 あなたがテキストフィールドに少なくとも2文字を入力すると、この例では、それは鳥の関連する名前が表示されます。
パフォーマンスを向上させるために、ここではいくつかのローカルキャッシュ、同様のリモート・データ・ソースの他のインスタンスを追加します。 ここでは、唯一のクエリキャッシュに保存され、キャッシュは複数の値に拡張することができ、各エントリの値です。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIの自動補完（オートコンプリート） - リモート・キャッシュ</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スタイル>
.ui-オートコンプリートローディング{
背景：白のurl（ '画像/ UI-anim_basic_16x16.gif'）右中央ノー・リピート。
}
</スタイル>
<スクリプト>
$（関数（）{
VARキャッシュ= {};
$（ "#birds」）.autocomplete（{
minLength：2、
ソース：関数（リクエスト、レスポンス）{
varの各用語= request.term。
場合（キャッシュ内の用語）{
応答（キャッシュ[用語]）;
返します。
}
$ .getJSON（「Search.php "、要求、機能（データ、ステータス、XHR）{
キャッシュ[用語] =データ;
応答（データ）。
}）;
}
}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<DIVクラス= "UIウィジェット">
<= "鳥"のラベル>バード：</ label>は
<入力されたID = "鳥">
</ DIV>
</ BODY>
</ HTML>
スクロール可能な結果
オプションの長いリストを表示するとき、あなたはあまりにもメニューを表示するオートコンプリートメニューを防止するための最大の高さを設定することができます。 長いスクロール可能なリストの結果を得るために「A」または「s」を入力してみてください。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIの自動補完（オートコンプリート） - スクロール可能な結果</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スタイル>
.ui-オートコンプリート{
最大高さ：100pxに。
オーバーフロー-Y：自動;
/ * *水平スクロールバーを防ぎます/
オーバーフロー-X：隠されました;
}
/ * IE 6は、max-高さをサポートしていません。
* *私たちは、高さの代わりに使用していますが、これは、メニューは常に高さとして表示されて強制されます/
* HTMLの.ui-オートコンプリート{
高さ：100pxに。
}
</スタイル>
<スクリプト>
$（関数（）{
するvar availableTagsの= [
「ActionScriptの」、
「アップルスクリプト」、
「ASP」、
「BASIC」、
「C」、
「C ++」、
「Clojureの "、
「COBOL」、
「ColdFusionの "、
「アーラン」、
「Fortranの "、
「グルービー」、
「ハスケル」、
「Java」、
「JavaScriptの」、
"Lispの"、
「Perlの "、
「PHP」、
「パイソン」、
「ルビー」、
「スカラ座」、
「スキーム」
];
$（ "#tags」）.autocomplete（{
ソース：availableTags
}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<DIVクラス= "UIウィジェット">
<= "タグ"のラベル>タグ：</ label>は
<入力されたID = "タグ">
</ DIV>
</ BODY>
</ HTML>
XMLデータ
この例では、いくつかのXMLデータを取得する方法を示して、それを解決し、データソースとしてのオートコンプリートするためにそれを提供するために、jQueryのメソッドを使用しています。
また、リモートXMLデータソース参照の解決として使用することがこの例では、 - 分析は、各ソースのコールバック要求で発生します。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIの自動補完（オートコンプリート） - XMLデータ</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スタイル>
.ui-オートコンプリートローディング{背景：白のurl（ '画像/ UI-anim_basic_16x16.gif'）右中央ノー・リピート;}
</スタイル>
<スクリプト>
$（関数（）{
関数log（メッセージ）{
$（ "<DIV />"）は.text（メッセージ）.prependTo（「#log "）;
$（ "#log」）.ATTR（「scrollTopスプライト"、0）;
}
$アヤックス（{
URL： "london.xml」、
データ型：「XML」、
成功：関数（xmlResponse）{
varの各データは、= $（ "geoname」、xmlResponse）の.map（関数（）{
リターン{
値：$（ "名前"、この）は.text（）+ "、" +
（$ .trim（$（ "COUNTRYNAME」、この）は.text（））||」（未知の国）」）、
ID：$（ "geonameId」、この）は.text（）
};
。}）（）を取得します。
$（ "#birds」）.autocomplete（{
ソース：データ、
minLength：0、
選択：機能（イベント、UIを）{
ログイン（ui.item？
「選択した： "+ ui.item.value +」、geonameIdは：" + ui.item.id：
）+ this.value "何も選択していない、入力がありました」。
}
}）;
}
}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<DIVクラス= "UIウィジェット">
<= "鳥"のラベル>ロンドンマッチ：</ label>は
<入力されたID = "鳥">
</ DIV>
<DIVクラス= "UIウィジェット"スタイル= "マージントップ：2EM;フォントファミリ：Arialの">
結果：
<DIVのID = "ログイン"スタイル= "高さ：200pxの;幅：300ピクセル;オーバーフロー：自動;"クラス= "UI-ウィジェットコンテンツ"> </ div>の
</ DIV>
</ BODY>
</ HTML>