jQuery.Autocompleteは自動補完機能を実装します（詳細説明）_jquery

1. jquery.autocomplete 参照アドレス
http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
http://docs.jquery.com/Plugins/Autocomplete
2. jquery.autocomplete の詳細な説明
構文:
autocomplete(urlor data, [options])
パラメータ:
url または data: array または url
[オプション]: オプション。オプションは次のように説明されます:
1) minChars (数値)
autoComplete をトリガーする前にユーザーが入力する必要がある最小文字数、デフォルト: 1 (0 に設定されている場合) 、入力ボックスをダブルクリックするか、入力ボックスの内容を削除するときにリストを表示します。
2) width (数値)
ドロップダウンボックスの幅を指定します。デフォルト: 入力要素の幅
3) max (数値)
autoComplete ドロップダウン表示の数項目、デフォルト: 10
4) 遅延 (数値)
キーストローク後に autoComplete をアクティブにするまでの遅延時間 (ミリ秒単位) デフォルト: リモートの場合は 400、ローカルの場合は 10
5) autoFill (ブール値)
選択時に次のキーストロークにユーザーを自動的に追加するかどうか。現在のマウス位置の値が入力ボックスに入力されます。
6)mustMatch (ブール値)
true に設定すると、autoComplete のみが実行されます。入力ボックスに一致する結果が表示されるようにします。ユーザーによる入力はすべて無効です。デフォルト: false
7) matchContains (ブール値)
は内部の一致をチェックするかどうかを決定します。 ba が foo bar の ba と一致するかどうかなど、比較するときの文字列。キャッシュを使用することがより重要です。autofill と混合しないでください。デフォルト: false
8) selectFirst (Boolean)
true に設定すると、最初の文字列が返されます。 autoComplete ドロップダウン リストの値は、ユーザーがタブまたはリターン キーを入力すると自動的に選択されますが、ユーザーが項目を選択した場合は (キーボードまたはマウスを使用して) 選択された値になります。デフォルト: true
9) cacheLength (数値)
データベースから取得した結果セットにキャッシュするレコードの数を 1 に設定します。デフォルト: 10
10) matchSubset (Boolean)
autoComplete はサーバー クエリのキャッシュを使用できますか? キャッシュが foo クエリ結果用の場合、ユーザーが foo を入力した場合、キャッシュを取得する必要はありません。キャッシュは直接使用されます。このオプションは通常、サーバーの負荷を軽減し、パフォーマンスを向上させるために有効になります。デフォルト: true
11) matchCase (Boolean)
大文字と小文字の区別スイッチがオンになっているかどうかを比較します。キャッシュを使用する場合は、FOO のキャッシュ内でフットが見つかるかどうかと同様に、これを理解するのがより重要です。デフォルト: false
12) multiple (Boolean)
複数の値を入力できるかどうか、つまり autoComplete を複数回使用して複数の値を入力できるかどうか。デフォルト: false
13) multipleSeparator (String)
はいの場合 文字。複数の選択を行うときに各選択を区切るために使用されます。デフォルト: ","
14) スクロール (ブール値)
結果セットがデフォルトの高さより大きい場合にスクロール表示を使用するかどうかデフォルト: true
15) スクロール高さ(数値)
オートコンプリートプロンプトのスクロールの高さはピクセルサイズで表されます。デフォルト: 180
16) formatItem (関数)
表示される各項目に対して詳細なタグを使用します。この関数の場合、オートコンプリーターは 3 つのパラメーター (row、i、max) を提供し、返された結果の配列を使用して、戻り値がドロップダウン リストに表示されます。現在処理されている行数 (つまり、1 から始まる自然数)、現在の結果配列内の要素の数は項目の数です。 デフォルト: none (カスタム処理関数が指定されていないことを意味します)。
17) formatResult (関数)
は formatItem と似ていますが、入力テキスト ボックスに入力する値をフォーマットすることもできます。 3 つのパラメータ (formatItem と同じ)。デフォルト: none。これは、データのみを意味するか、または formatItem が提供する値を使用することを意味します。
18) formatMatch (関数)
データの各行に対してこの関数を使用して、データ形式をフォーマットします。戻り値は内部検索アルゴリズムによって使用されます。パラメータ値行
19) extraParams (Object )
通常どおり、バックグラウンドに追加のパラメータを指定します。キーと値のペアのオブジェクト。渡された値が { bar: 4 } の場合、オートコンプリーターによって解析されて my_autocomplete_backend.php?q=foo&bar=4 になります (デフォルト: {} 20) result (ハンドラー) 戻り値:jQuery
このイベントは、ユーザーが項目を選択した後にトリガーされます。
event: イベント オブジェクト。
data: 選択されたデータ行。 .
formatted: formatResult 関数
によって返される値 例:
$("#singleBirdRemote" ).result(function(event, data, formatted){
//値を割り当てる
});

3. jquery.autocomplete の使用に関するヒント 1) jquery.autocomplete で必要なデータ ソースは次のとおりです。ローカル データとリモート データ
ローカル データ ソースは、ローカル js 配列またはローカル json オブジェクトです。
var data = [" c ","java", "php", "coldfusion"," javascript"];
var data = [{text:'Link A', url:'/page1'}, {text:'Link B' , url: '/page2'} ];
リモート アドレスの場合、デフォルトで渡されるパラメータは次のとおりです: q (入力値)、limit (返された結果の最大値)。extraParams を使用して他のパラメータを渡すことができます。また、リモート データ ソースには固定形式のデータが必要です。戻り結果は次のとおりです: use " 「データの各行を分割します。データの各行の各要素を分割するには、「|」を使用します。例:
バックエンド C# コード:

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

string data = "c n java n php n coldfusion n javascript";
string data = "{text:'LinkA', url:'/page1 '} n {text:'リンク B', url: '/page2'} ";


4. jquery.autocomplete インスタンス
1) ローカル データ ソース呼び出しメソッド
方法 1:

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

$("#tags").autocomplete(["c ","java", "php", "coldfusion"," javascript" ], {
width: 320,
max: 4,
highlight: false,
multiple: true,
multipleSeparator: "",
scroll: true,
scrollHeight : 300
});

方法 2:

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

var data = [{text:'Link A', url: '/page1'}, {text:'Link B', url: '/page2'} ];
$( "...").autocomplete(data,{
formatItem: function(item) {
return item.text;
}
}).result(function(event) ,item) {
location.href = item.url;
});

2) メソッド
を呼び出す:
フロントエンド js

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

$(document ).ready(function() {
$("#Login").focus().autocomplete("/ajax/Account", {
formatItem: function(row, i,max) {
var obj =eval("(" row ")"); // js オブジェクトに変換します
return obj.Text;
formatResult: function(row) {
var obj =eval ("(" row ")") //js オブジェクトに変換
return obj.Text;
}).result(function(event, item); {
var obj = eval ("(" item ")") //js オブジェクトに変換
$("#link").attr("href",obj.url); );
});




バックエンド C# (mvc) コード:

コードをコピーします

コードは次のとおりです。 public ContentResult GetUserAccount(string q) {

string strResult = ""; 🎜>//...データ操作のクエリ。..

//...データのフォーマット...
//フォーマットの結果は
strResult = "{text:'Link A', url:'/page1'}n {text :'Link B', url: '/page2'} ";
return Content(strResult);
}


方法 2:
フロントエンド js

コードをコピー

コードは次のとおりです。 < scripttype="text/javascript"> $(document ).ready(function() { $.getJSON("/ajax/Account",function(data) {

$("#Login ").focus().autocomplete(data, {

formatItem: function(item,i, max) {
return item.Text;
},
formatResult:function(item) {
return item.Text;
}
} ).result(function(event, item){
$("#link").attr("href",item.url);
});
});
}) ;


バックエンド C# (mvc) コード:

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

publicContentResult Account(string q) { string strResult = ""; //...データ操作のクエリ。.. //...データのフォーマット...

//フォーマットの結果は

strResult = "[ {"text":"LinkA", "url":"/page1" }, {"text":"LinkB", "url": "/page2"} ]";
return Content(strResult);
}