これはブラックホールのようです: jQuery UI Webサイト、Stack Overflow、およびgooglingを1時間検索した後、オートコンプリートのサーバー側。
サーバーに渡されるパラメーターとJSON応答はどのようになりますか?
他のみんながどのようにこれを行う方法を学んだのですか?サイトはクライアント側のJavaScriptコードについてのみ議論しているようで、プロトコルやサーバー側の例については議論していません。
最も簡単なリモートの例を機能させるのに十分なものが必要です。
サーバーに渡されるパラメーター
request.term
をサーバー側のコードに渡す必要があります(ドキュメントから):
「term」と呼ばれる単一のプロパティを持つリクエストオブジェクト。現在のテキスト入力の値を参照します。
基本的に、autocomplete
コードには次のようなものがあります。
$("#autocomplete").autocomplete({
// request.term needs to be passed up to the server.
source: function(request, response) { ... }
});
また、JSON応答はどのように見えるべきですか?
autocomplete
ウィジェットは、label
およびvalue
プロパティを持つJSONオブジェクトの配列を期待します(ただし、value
を指定するだけで、ラベルとして使用されます) 。したがって、最も単純なケースでは、次のようなデータを返すことができます。
[
{ label: 'C++', value: 'C++' },
{ label: 'Java', value: 'Java' }
{ label: 'COBOL', value: 'COBOL' }
]
もっと複雑なものが必要な場合は、$.ajax
関数のsuccess
引数を使用して、オートコンプリートが取得する前に取得するデータを正規化できます。
source: function( request, response ) {
$.ajax({
/* Snip */
success: function(data) {
response($.map( data.geonames, function( item ) {
return {
label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
value: item.name
}
}));
}
});
このコードは、例 here から取られています(これは、より複雑なシナリオでのajax +オートコンプリートの全体的な動作の良い例です)。
基本的に、成功するajaxリクエストでは、受信したデータは($.map
を使用して)オートコンプリートウィジェットが期待するものに正規化されます。
お役に立てば幸いです。
Andrew Whitakerの完璧な答えに加えて、$。mapの代替方法はレンダラーをオーバーライドすることです その例はjQuery UIデモページに表示されます
次のようなJSON呼び出しを使用してこの機能を使用しました。
JSONレスポンス
{ "Records": [ { "WI_ID": "1", "Project": "ExampleProject", "Work_Item": "ExampleWorkItem", "Purchase_Order": "", "Price": "", "Comments": "", "Quoted_Hours": "", "Estimated_Hours": "", "Achieved": "False", "Used_Hours": "0" } ] }
jQuery
$("#WorkItem").autocomplete({ source: function(request, response){ $.ajax({ type: "POST", url: "ASPWebServiceURL.asmx/WorkItems", data: "{'Project_ID':'1'}", contentType: "application/json; charset=utf-8", dataType: "json", success: function (msg) { response($.parseJSON(msg.d).Records); }, error: function (msg) { alert(msg.status + ' ' + msg.statusText); } }) }, select: function (event, ui) { $("#WorkItem").val(ui.item.Work_Item); return false; } }) .data("autocomplete")._renderItem = function (ul, item) { return $("<li></li>") .data("item.autocomplete", item) .append("<a>" + item.Work_Item + "</a>") .appendTo(ul); };
この例では、_renderItem関数がオーバーライドされ、JSON応答から取得したレコードの属性を使用して、検索結果リスト(つまり、テキストボックスの下に表示されるリスト)が埋められます。
それほど単純ではありませんが、かなり興味深いものを引き出すことができます(たとえば、JSON応答からの複数ビットのデータを使用して)
これまでの両方の答えは複雑で誤解を招きやすく、jQuery UI Auto Completeの重要な理解は成功匿名関数です。AutoCompleteの成功コールバックにより、サーバー側JSON応答の形式を活用/制御できます。ラベル、値の形式は従うのに適していますが、必要なJSON形式を定義できます。重要なのは、成功関数を定義する方法です。
<input id="refPaymentTerms" class="form-control">
$("#refPaymentTerms").autocomplete({
source: function (request, response) {
$.ajax({
type: "POST",
url: "/admin/JobPaymentRefs",
dataType: "json",
data: {
term: request.termCode
},
error: function (xhr, textStatus, errorThrown) {
alert('Error: ' + xhr.responseText);
},
success: function (data) {
response($.map(data, function (item) {
return {
label: item.label,
value: item.value
}
}));
}
});
}
});
MVCコントローラー:
public JsonResult JobPaymentRefs()
{
var query = from REFTerm in _db.REFTerms
select new
{
label = REFTerm.TermCode,
value = REFTerm.TermCode
};
//var refTerms = _db.REFTerms.Select(x => x.TermCode);
return Json(query.ToArray());
}
ここに、ASP.NETバックエンドとの非常に標準的な自動完全バインドがあります。
AutoComplete匿名コールバックで正しくマップしている限り、サーバー側で必要なJSON形式を返すことができます。ラベル、値、名前、値のペアはほとんどの要件に十分ですが、JSONを使用してサーバー側でオートコンプリート成功コールバックで正しくマッピングするだけで十分です。
JQuery UIオートコンプリートを使用するためにサーバー側スクリプトを微調整する必要はありませんnot。 JavaScript関数を source
として指定して、カスタムリクエストを作成できます(例POSTまたはGET、サーバー側のスクリプトが予期するクエリ文字列パラメーターを使用)および任意の応答(XML応答の処理など)を処理します。
そうは言っても、source
パラメーターとして文字列を使用すると、次のようになります。
[...]オートコンプリートプラグインは、JSONデータを返すURLリソースを指す文字列を想定しています。同じホスト上または異なるホスト上に存在できます(JSONPを提供する必要があります)。オートコンプリートプラグインは結果をフィルタリングせず、代わりに、クエリ文字列にtermフィールドが追加されます。これは、サーバー側スクリプトが結果のフィルタリングに使用する必要があります。たとえば、ソースオプションが
http://example.com
に設定され、ユーザーがfooと入力した場合、GET要求はhttp://example.com?term=foo
に対して行われます。データ自体は、上記のローカルデータと同じ形式にすることができます。
「データ自体は上記のローカルデータと同じ形式にすることができます」に関して、次のJSON(またはJSONP)形式が機能します。
// no matching entries
[]
// array of strings
[
"Option 1",
"Option 2"
]
// array of objects with label property
[{
"label": "Option 1"
}, {
"label": "Option 2"
}]
// array of objects with value property
[{
"value": "Option 1"
}, {
"value": "Option 2"
}]
// array of objects with label and value properties
[{
"label": "Option 1",
"value": 1
}, {
"label": "Option 2",
"value": 2
}]
オブジェクトの配列の場合、labelまたはvalue
以外の追加のプロパティを自由に指定できます。すべてのプロパティはコールバック内で利用可能になります。
次のコードは私のために働いています。これを実行するには、jsonでエンコードされたデータが必要です。データを取得すると、jQueryオートコンプリート形式に従ってデータを変更し、選択も可能にします
var $url = "http://some-url/get-json";
//name is the id of the textbox where autocomplete needs to be shown
$('#name').autocomplete(
{
source: function(request,response)
{
//gets data from the url in JSON format
$.get($url, function(data)
{
obj = JSON.parse(data); //parse the data in JSON (if not already)
response($.map(obj, function(item)
{
return {
label: item.full_name,
value: item.full_name,
id:item.id,
email:item.email,
phone:item.phone,
}
}
)); //end response
}); //end get
},
select:function(event, ui)
{
console.log(ui.item.full_name);
console.log(ui.item.email);
}
}); //end of autocomplete
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Autocomplete - Categories</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
.ui-autocomplete-category {
font-weight: bold;
padding: .2em .4em;
margin: .8em 0 .2em;
line-height: 1.5;
}
body {
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
font-size: 62.5%;
}
</style>
<script>
$.widget("custom.catcomplete", $.ui.autocomplete, {
_renderMenu : function(ul, items) {
var that = this, currentCategory = "";
$.each(items, function(index, item) {
if (item.category != currentCategory) {
ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
currentCategory = item.category;
}
that._renderItemData(ul, item);
});
}
});
</script>
<script>
$(function() {
$("#search").catcomplete({
delay : 0,
source : function(request, response) {
$.ajax({
url : "search",
dataType : "json",
data :"searchText=hk",
success : function(data) {
response(data);
} //success
});
}
});
});
</script>
</head>
<body>enter code here
<label for="search">Search: </label>
<input id="search" />
</body>
</html>
次のオートコンプリートは https://jqueryui.com/autocomplete/#remote-jsonp からのものです
デモリンク: https://jqueryui.com/resources/demos/autocomplete/remote-jsonp.html
ソースコードは次のとおりです。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Remote JSONP datasource</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
.ui-autocomplete-loading {
background: white url("images/ui-anim_basic_16x16.gif") right center no-repeat;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
function log( message ) {
$( "<div>" ).text( message ).prependTo( "#log" );
$( "#log" ).scrollTop( 0 );
}
$( "#birds" ).autocomplete({
source: function( request, response ) {
$.ajax( {
url: "search.php",
dataType: "jsonp",
data: {
term: request.term
},
success: function( data ) {
response( data );
}
} );
},
minLength: 2,
select: function( event, ui ) {
log( "Selected: " + ui.item.value + " aka " + ui.item.id );
}
} );
} );
</script>
</head>
<body>
<div class="ui-widget">
<label for="birds">Birds: </label>
<input id="birds">
</div>
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
Result:
<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>
</body>
</html>