这是
previous JQueryUI Autocomplete question,I asked的延续.
这一次,我有我的数据返回…但我不知道我如何定义要显示的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 / etc. …然后填充< ul> list(我假设我扩展回调,上面..而不是调用这个响应(数据)方法.. 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上设置断点,看看会发生什么.