jQuery UI オートコンプリート エクスペリエンス Sharing_jquery

サポートされるデータ ソース
jQuery UI Autocomplete は主に、文字列配列と JSON の 2 つのデータ形式をサポートします。
次のような通常の配列形式には特別なことは何もありません:

コードをコピー コードは次のとおりです:

[ "cnblogs","blog garden","囧月"]

JSON 形式の配列の場合、次のような label 属性と value 属性が必要です:

コードをコピー コードは次のとおりです:

[{label: "blog garden", value: "cnblogs"}, { label: "囧月", value: "囧Month"}]

label 属性はオートコンプリート ポップアップ メニューに表示するために使用され、value 属性は選択後にテキスト ボックスに割り当てられる値です。 。
いずれかの属性が指定されていない場合は、次のように他の属性で置き換えられます (つまり、値とラベルの値が同じです)。

Copy code コードは次のとおりです:

[{label: "cnblogs"}, {label: "囧月"}]
[{value: "cnblogs"}, {value: "囧月" "}]

ラベルも値も指定されていない場合、オートコンプリート プロンプトに使用できません。
サーバーからの JSON キー出力は次のように二重引用符で囲む必要があることにも注意してください:

Copy code Code As以下:

[{"label": "ブログガーデン", "value": "cnblogs"}, {"label": "囧月", "value": "囧月"}]

そうしないと、parsererror エラーが発生する可能性があります。
主なパラメータ
jQuery UI Autocomplete の一般的に使用されるパラメータは次のとおりです:
Source: データ ソースの指定に使用され、タイプは String、Array、Function です
String: ajax リクエストに使用されるサーバー側のアドレス、返される配列/JSON 形式
配列: つまり、文字列配列または JSON 配列
関数(リクエスト、応答): request.term、response([Array]) を通じて入力値を取得してデータを表示します (JSONP はこれです。メソッド)
minLength: 入力ボックス内の文字列の長さが minLength に達すると、オートコンプリートをアクティブ化します。
autoFocus: オートコンプリート選択メニューがポップアップ表示されたら、最初の選択メニューを自動的に選択します。
lay: 遅延するミリ秒数オートコンプリートを有効にする
その他、一般的に使用されないものはリストされません。
使用法
ページに次の入力ボックスがあるとします。

AJAX リクエスト
ソースを次のように指定します。サーバー側のアドレス 実装するには次のようにします:

コードをコピー コードは次のとおりです:

$("#autocomp") .autocomplete({
source: "remote.ashx",
minLength: 2
});

その後、サーバー側で対応する結果を出力します。デフォルトの配信に注意してください。パラメータ名は次のとおりです。

コードをコピーします。 コードは次のとおりです。

public void ProcessRequest(HttpContext context )
{
// クエリパラメータ名のデフォルトは term
string query = context.Request.QueryString["term" ];
context.Response.ContentType = "text/javascript";
//文字列配列または JSON 配列を出力
context.Response.Write("[{"label":"ブログガーデン"," value":"cnblogs"},{"label":"囧月" ,"value":"囧月"}]");
}

ローカル配列/JSON 配列

コードをコピー コードは次のとおりです:

// ローカル文字列配列
var availableTags = [
"C#",
"C ",
"Java",
"JavaScript",
"ASP",
"ASP.NET",
" JSP",
"PHP",
"Python",
"Ruby"
];
$("#local1").autocomplete({
source: availableTags
});
// ローカル json 配列
var availableTagsJSON = [
{ ラベル: "C# 言語", 値: "C#" },
{ ラベル: "C 言語", 値: "C " },
{ ラベル: "Java 言語", 値: " Java" },
{ ラベル: "JavaScript 言語", 値: "JavaScript" },
{ ラベル: "ASP. NET", 値: "ASP.NET" },
{ ラベル: " JSP", 値: "JSP" },
{ ラベル: "PHP", 値: "PHP" },
{ラベル: "Python", 値: "Python" },
{ ラベル: "Ruby", 値: "Ruby" }
];
$("#local2").autocomplete({
ソース: availableTagsJSON
});
Callback Function メソッド
カスタム関数としてソースを指定してカスタムデータを取得する関数には主に 2 つのパラメーター (リクエスト、レスポンス) があり、入力値、結果を取得するために使用されます。
ローカル配列モードでデータを取得 (Sina Weibo ログインを模倣)

コードをコピー コードは次のとおりです:

var hosts = ["gmail.com", "live.com", "hotmail.com", "yahoo.com", "cnblogs.com", "Mars.com", "囧月. com"];
$("#email1").autocomplete({
autoFocus: true,
source: function(request, response) {
var term = request.term, //request .term は入力文字列です
ix = term.indexOf("@"),
name = term, // ユーザー名
host = "", // ドメイン名
result = [] ; // result
result.push(term);
// result.push({ label: term, value: term }); // json 形式
if (ix > -1); 🎜>name = term.slice(0, ix);
host = term.slice(ix 1);
if (name) {
var foundHosts = (host ? $. grep (hosts, function(value) {
return value.indexOf(host) > -1;
}) : hosts),
fidedResults = $.map(findedHosts, function(value) {
return name "@" value; //return 文字列形式
// return { label: name "@" value, value: name "@" value }); result = result.concat($.makeArray(findedResults));
}
response(result);// 結果を提示します
}
});
JSONP 経由でデータを取得します

公式デモから直接データを取得し、リモート サーバーに ajax リクエストを送信し、返された結果を処理して、最後にレスポンスを通じてそれを表示します:

コードをコピーします

コードは次のとおりです:

$("#jsonp").autocomplete({ ソース: function(リクエスト , レスポンス) { $.ajax({ url: "http://ws.geonames.org/searchJSON", dataType: "jsonp",

data: {

featureClass : "P"、
style: "full"、
maxRows: 12、
name_startsWith: request.term
}、
success: function(data) {
response($ .map(data.geonames, function(item) {
return {
label: item.name (item.adminName1 ? ", " item.adminName1 : "") ", " item.countryName,
値: item.name
}
}));
}
},
minLength: 2
}); 🎜>

Main events

jQuery UI Autocomplete には、いくつかの段階で追加の制御に使用できるイベントがいくつかあります。
create(event, ui): Autocomplete の作成時に、次のことができます。このイベントを で使用し、外観を制御します
search(event, ui): リクエストを開始する前に、このイベントで false を返してリクエストをキャンセルできます
open(event, ui): オートコンプリートの結果リストが表示されるときPops up
focus(event, ui): オートコンプリートの結果リストのいずれかの項目がフォーカスを取得するとき、ui.item がフォーカスを取得する項目です。
select(event, ui): オートコンプリートの結果リストのいずれかの項目が選択されるとき, ui.item は選択されたアイテム

close(event, ui): オートコンプリートの結果リストが閉じられたとき
change(event, ui): 値が変化したとき、ui.item が選択されたアイテムこれらのイベントの ui パラメーター item 属性 (存在する場合) には、ソース内のデータ セットが配列であるか JSON 配列であるかに関係なく、次のようにデフォルトで label 属性と value 属性があります:



コードをコピーします


コードは次のとおりです:


["cnblogs","blog garden","囧月"]

[{label: "ブログガーデン", value: " cnblogs"}, {label: "囧月", value: "囧月"}] [{label: "囧月园", value: "cnblogs" , id: "1"}, {label: "囧月" month", value: "囧月", id: "2"}] 3 番目のタイプであれば、次のことができます。 ui.item.id の値も取得します。 これらのイベントは、次の 2 つの方法でバインドできます:

コードをコピー

コードは次のとおりです:


// パラメータ内

$("#autocomp").autocomplete({ source: availableTags , select: function(e, ui) { alert(ui. item .value) } }); //bind

$("#autocomp").bind("autocompleteselect", function(e, ui) {

アラート(ui.item.value);


bind によるバインドで使用されるイベント名は「autocomplete」です。「select」などのイベント名は「autocompleteselect」です。
複数の値のオートコンプリート
通常の状況では、複数の値が必要な場合 (JavaScript、C#、など)、入力ボックスのオートコンプリートには 1 つの値のみが必要です。 asp.net) を使用するには、追加の処理のためにいくつかのイベントをバインドする必要があります。
入力ボックスの値がオートコンプリートの単一の値に置き換えられるのを防ぐために、フォーカス イベントで false を返します。
内の複数の値を結合します。 select イベント
要素の keydown イベント内で実行します 一部の処理、理由は 1 と同じ
コールバック関数のソースを使用して最後の入力値を取得し、結果を提示します
または公式のデモを取るだけですコードを直接:

コードをコピー コードは次のとおりです:

// 複数の値を区切りますコンマ別
function split(val) {
return val.split( /,s*/);
}
//input
function extractLast(term) の最後の値を抽出します) {
return split(term).pop();
}
// Tab キーを押すと、入力ボックスの値の設定をキャンセルします
function keyDown(event) {
if (event.keyCode === $.ui.keyCode.TAB &&
$(this).data("autocomplete").menu.active) {
event.preventDefault();
}
}
var options = {
// Get focus
focus: function( ) {
// フォーカスに値が挿入されないようにします
return
},
// オートコンプリート ポップアップ メニューから値を選択する場合は、入力ボックスの末尾に値を追加し、カンマで区切ります
select: function(event, ui) {
var term = split(this. value);
// 現在の入力を削除します
terms.pop();
// 選択した項目を追加します
terms.push(ui.item.value);
// 追加します最後のカンマとスペースを取得するためのプレースホルダー
terms.push("");
this.value = terms .join(", ");
return
}
};
// 複数の値、ローカル配列
$("#local3").bind("keydown" , keyDown)
.autocomplete($.extend(options, {
minLength) : 2,
source: function(request, response) {
// オートコンプリートにデリゲートしますが、最後の用語を抽出します
response($.ui.autocomplete.filter(
availableTags, extractLast( request.term)));
}
}));
// 複数の値、ajax は json を返します
$("#ajax3").bind("keydown", keyDown)
.autocomplete($.extend(options, {
minLength: 2,
source: function(request, response) {
$.getJSON("remoteJSON.ashx", {
term: extractLast) (request.term)
}, response);
}
}));

終了
最後に、次のコードを入力します: クリックしてダウンロード。
詳細については、jQuery UI Autocomplete 公式デモをご覧ください: http://jqueryui.com/demos/autocomplete