jQuery自动补全和解析接收到的JSON
jQuery自动补全和解析接收到的JSON
提问于 2012-08-31 02:09:24
执行ajax请求的JavaScript代码
$('#search-field').autocomplete({source: 'url/of/autocomplete'});在我改变JSON结构之前，它工作得很好。它过去常常会返回
["anything","something","super value"]现在它(server)返回一个有点复杂的JSON
[{"title":"some-title","link":"/searc?q=some-title"}, {"title":"some-title2","link":"/searc?q=some-title2"}]好吧，现在还没显示出来。它正在工作，但值(标题)没有明显显示。
我应该怎么做才能解决它？
回答 4
Stack Overflow用户
回答已采纳
发布于 2012-08-31 02:24:40
我认为您使用的是AJAX返回的数据，因此源属性应该是一个函数，并且当它被选中时，您必须添加一个新属性。当您收到数据时，您需要将其存储在全局变量中，然后在另一个函数中获取它的值：
$('#search-field').autocomplete({source: function(){
jQuery.post('url', data, function(dataReceived){globalVariable = dataReceived; }, 'json');
},
select: function(event, ui) {
var local = globalVariable[ui.item];
// work with the local variable.
}
});Stack Overflow用户
发布于 2012-08-31 02:34:37
它必须将"title“重命名为"label”，并将"link“重命名为"value”。就这样!
Stack Overflow用户
发布于 2012-08-31 03:55:16
由于我看不到您的代码，我们假设[{"title":"some-title","link":"/searc?q=some-title"}, {"title":"some-title2","link":"/searc?q=some-title2"}]是您的数据源。话虽如此，这就是我要做的…
$(document).ready(function(){
var dataSource= [{"title":"some-title","link":"/searc?q=some-title"}, {"title":"some-title2","link":"/searc?q=some-title2"}];
$('#search-field').autocomplete({
source: function(request, response) {
var filterResults = $.map(dataSource, function(item) {
if(item.title.toLowerCase().indexOf(request.term.toLowerCase()) != -1 || item.link.toLowerCase().indexOf(request.term.toLowerCase()) != -1){
return item;
}
else{
return null;
}
});
response(filterResults);
}
}).data('autocomplete')._renderItem = function (ul, item)
{
return $("<li></li>")
.data("item.autocomplete", item)
.append($("<a></a>").html("Title: " + item.title + ", Link: " + item.link))
.appendTo(ul);
};
});现场演示：http://jsfiddle.net/hUE9M/131/
在这个方法中，你可以搜索"title“和"link”属性。我希望这能帮到你!
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12202931
复制相关文章
相似问题
腾讯云开发者
