jQuery UI オートコンプリートの手順_jquery

はじめに
jQuery UI の最近の更新では、自動補完コントロール AutoComplete が追加されました。これにより、別の強力な開発ツールが提供されます。このコントロールの使用方法を紹介します。
まず、jQuery UI は jQuery に基づいているため、まずページ内で jQuery スクリプト ライブラリを参照し、次に jQuery UI ライブラリを参照する必要があります。jQuery UI ライブラリについては、ライブラリ全体を参照することも、参照のみを参照することもできます。現在のページで使用されているライブラリ。
jQuery UI のダウンロード アドレス: http://jqueryui.com/download
1. 基本構成
一般的に、小さなページの場合は、独立したスクリプトを参照することで負荷を軽減できます。サイズに応じて、ここでは別のスクリプトを使用します。オートコンプリートには、次のスクリプト ファイルが関係します。

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

もちろん、ページには入力ボックスが必要です。

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

タグ:

使い方としては非常に簡単です。プロンプトされたデータは配列から取得できます。パラメータ オブジェクトのsourceプロパティを通じてデータ ソースを設定します。

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

$(function () {

var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C" 、
"C "、
"Clojure"、
"COBOL"、
"ColdFusion"、
"Erlang"、
"Fortran"、
" Groovy」、
「Haskell」、
「Java」、
「JavaScript」、
「Lisp」、
「Perl」、
「PHP」、
「Python」 ",
"Ruby",
"Scala",
"Scheme"
];
// ここではデータ ソースとして配列を使用します。 availableTags は配列の名前です
$("#tags" ).autocomplete({
source: availableTags
})
});



オートコンプリート効果が機能しています。

3. リモート データ ソースの使用

ソース属性にリモート アドレスを表す文字列を設定し、このリモート アドレスを通じて JSON データを取得することもできます。 オートコンプリートの場合、アドレスが指定されると、ユーザーが入力ボックスに入力を開始すると、リクエスト内の term という名前のパラメーターが、現在入力されている内容を表します。結果はjson形式のデータである必要があります。
JSON の詳細な説明は、ここで参照できます: http://www.json.org/json-zh.html



コードをコピー

コードは次のとおりです: var url = "serviceHandler.ashx"; $("#auto").autocomplete(

{

source: url
}
);


一般的なハンドラーを通じてデータを返すことができます。返される文字列は JSON 形式の要件に準拠する必要があり、文字列には二重引用符を使用する必要があることに注意することが重要です。

コードをコピーします

コードは次のとおりです。 public class serviceHandler: IHttpHandler { public void ProcessRequest (HttpContext context) {

context.Response.ContentType = "text/plain";

HttpResponse 応答 = context.Response
System.IO.TextWriter ライター = 応答.Output; // 注: 標準の JSON 形式の文字列であり、二重引用符を使用する必要があります。
writer.Write("["One", "Two", "Three"]");
}
public bool IsReusable {
get {
return false
}
}


通常、リモート データを使用する場合、数文字を入力した後にユーザーにプロンプ​​トを表示します。これは、ローカル データ ソースの場合は通常 0 です。リモート データ ソースの場合は、大きな数値 データの状況に応じて、この値を適切に増やす必要があります。このようにして、スクリプトは次のようになります。

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

var url = "serviceHandler.ashx";
$("#auto").autocomplete(
{
ソース: url,
minLength: 2
}
); >IV. キャッシュを備えたリモート データ ソース

ソースの関数を提供することで、リモート データのローカル キャッシュを追加できます。これにより、毎回サーバーにクエリを実行する必要がなくなります。


コードをコピー

コードは次のとおりです。 $(function () { var url = "serviceHandler.ashx";

var queue = {}, lastXhr;

$("#auto").autocomplete({
minLength: 2,
source: function (リクエスト,応答) {
var term = request.term;
if (キャッシュ内の用語) {
return;
lastXhr = $. getJSON(url , request, function (data, status, xhr) {
cache[term] = data;
if (xhr === lastXhr) {
response(data);
}
} );
}
});