jQuery UI Autocompleteを使用する方法がわからない…:(
-
02-10-2019 - |
質問
これはaからの継続です 以前のjqueryuiオートコンプリートの質問、私は尋ねました.
今回はデータを返しています...しかし、私にはわかりません どうやって 表示するHTMLと、そのHTMLを結果で動的に更新する方法を定義します。
だから、これが私のjQueryです。
Home.js
function AutoComplete(element) {
var cache = {};
$(element).autocomplete({
minLength: 2,
source: function (request, response) {
if (request.term in cache) {
response(cache[request.term]);
return;
}
else {
$.getJSON("/api/autocomplete/" +
encodeURIComponent(request.term),
function (data) {
cache[request.term] = data;
response(data);
});
}
}
});
}
そして、これは私の見解では配線されています
Index.aspx
<script type="text/javascript">
$(document).ready(function () {
AutoComplete("#searchQuestion");
})
</script>
今..私はそれがいくつかの(まだ作られていない)HTML/Div/などを使用するようにそれをどのように伝えるかわかりません。 ...そしてそれを埋めるために <ul>
リスト(上記のコールバックを拡張すると仮定しています。これを呼び出す代わりに response(data)
方法.. wtfはそれですか?)
解決
JQuery UIのオートコンプリートの私の実用的な例です。それが役に立てば幸い:
var cache = {};
$("#textbox").autocomplete({
source: function(request, response) {
if (request.term in cache) {
response($.map(cache[request.term].d, function(item) {
return { value: item.value, id: item.id }
}))
return;
}
$.ajax({
url: "/Services/AutoCompleteService.asmx/GetEmployees", /* I use a web service */
data: "{ 'term': '" + request.term + "' }",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
dataFilter: function(data) { return data; },
success: function(data) {
cache[request.term] = data;
response($.map(data.d, function(item) {
return {
value: item.value,
id: item.id
}
}))
},
error: HandleAjaxError // custom method
});
},
minLength: 3,
select: function(event, ui) {
if (ui.item) {
formatAutoComplete(ui.item); // custom method
}
}
});
今までにそうしていない場合は、入手してください Firebug. 。これは、Web開発のための貴重なツールです。このJavaScriptにブレークポイントを設定して、何が起こるかを確認できます。
他のヒント
このコードは私のために機能しました:
$( "#Textbox" ).autocomplete({
minLength: 2,
source: function( request, response ) {
var term = request.term;
if ( term in cache ) {
response( cache[ term ] );
return;
}
var currentProject=$("#project option:selected").text();
$.ajax({
url: "url",
data: {term : request.term, IssueType :'Test', Project : currentProject},
dataType: "json",
contentType: "application/json; charset=utf-8",
dataFilter: function(data) { return data; },
success: function (data) {
var results = $.map(data, function(item){
return { value: item.value, id: item.id }});
cache[request.term] = results; response(results); }
});
}
});
所属していません StackOverflow