我一直在努力解决这个问题,并搜索了所有其他示例,但似乎仍然无法弄清楚,尝试使用 jquery ui 自动完成,第一次尝试将所有这些放在一起。这是我的 JS:
$(document).ready(function () {
$("#search-title").autocomplete({
source: function ( request, response ) {
$.ajax({
url: "/include/autocomplete",
dataType: "json",
data: {
term: request.term
},
success: function (data) {
response( $.map( data.stuff, function ( item ) {
return {
label: item.name,
value: item.name
};
}));
}
});
},
minLength: 2,
focus: function (event, ui) {
$(event.target).val(ui.item.label);
return false;
},
select: function (event, ui) {
$(event.target).val(ui.item.label);
window.location = ui.item.value;
return false;
}
});
});
查看 Firebug 中的响应,我想我在这里得到了格式正确的 JSON:
{"stuff":[ {"label" : "Dragon", "value" : "http://site.com/animal/firebreathers"}] }
但由于某种原因它没有连接。当我点击 minLength 后,搜索字段下方会打开一个小的空框,但里面什么也没有。
更新:当我添加“alert(item);”时在响应调用中,我收到一个窗口,显示“site.com 的页面显示:object Object”——这可能是问题所在吗?
最佳答案
感谢我问题下的提示评论,我终于弄清楚了。
在我从 Jquery UI 网站复制的返回中,我有:
label: item.name,
value: item.name
将其更改为:
label: item.label,
value: item.value
解决了我与 jQuery 的斗争。我不知道这是否是一个好的做法,但它终于起作用了!
关于jQuery 自动完成远程 JSON 数据源不返回数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8631640/