jQuery UI 自动完成远程 JSON 响应
我使用 geonames.org 自动完成城市和州,但发现它太慢了,不可靠。我的代码如下,并且确实有效(等待大约 10 秒即可查看自动完成结果)
此处的旧(工作)代码:http://jsbin.com/umewo3/2/edit
$(function() {
$( "#sf_city" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "http://ws.geonames.org/searchJSON",
dataType: "jsonp",
data: {
featureClass: "P",
style: "full",
maxRows: 10,
country: 'US',
name_startsWith: request.term
},
success: function( data ) {
response( $.map( data.geonames, function( item ) {
return {
value: item.name + (item.adminName1 ? ", " + item.adminCode1 : "")
}
}));
}
});
},
minLength: 2
});
});
现在我使用 YQL,因为它们提供更快的响应。问题是我似乎不明白如何正确映射响应。您可以看到我正在发送一个格式良好的请求,并收到响应 - 但我不知何故没有正确处理响应。
这里有新的(损坏的)代码:http://jsbin.com/aqoke3/2/edit< /a>
$(function() {
$( "#sf_city" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "http://query.yahooapis.com/v1/public/yql",
dataType: "json",
data: {
q: 'select name,admin1.code from geo.places where text="' + request.term + '*" and country.code="US" limit 10 | sort(field="popRank", descending="true")',
format: 'json',
callback: 'cbfunc'
},
success: function( data ) {
response( $.map( data.query.results.place, function( item ) {
return {
value: item.name
}
}));
}
});
},
minLength: 2
});
});
I was using geonames.org to autocomplete city and state but found it to be far too slow to be reliable. My code is as follows, and does work (wait about 10 seconds to see the autocomplete results)
Old (working) code here: http://jsbin.com/umewo3/2/edit
$(function() {
$( "#sf_city" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "http://ws.geonames.org/searchJSON",
dataType: "jsonp",
data: {
featureClass: "P",
style: "full",
maxRows: 10,
country: 'US',
name_startsWith: request.term
},
success: function( data ) {
response( $.map( data.geonames, function( item ) {
return {
value: item.name + (item.adminName1 ? ", " + item.adminCode1 : "")
}
}));
}
});
},
minLength: 2
});
});
Now I am using YQL as they provide a much quicker response. The issue is that I don't seem to understand how to properly map the response. You can see I am sending a well formed request, and getting the response back - but I am somehow not dealing with the response properly.
New (broken) code here: http://jsbin.com/aqoke3/2/edit
$(function() {
$( "#sf_city" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "http://query.yahooapis.com/v1/public/yql",
dataType: "json",
data: {
q: 'select name,admin1.code from geo.places where text="' + request.term + '*" and country.code="US" limit 10 | sort(field="popRank", descending="true")',
format: 'json',
callback: 'cbfunc'
},
success: function( data ) {
response( $.map( data.query.results.place, function( item ) {
return {
value: item.name
}
}));
}
});
},
minLength: 2
});
});
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
我发现了这个问题。毕竟我正在妥善处理它。我设法从 jsonp 数据类型中删除 P。
一切都很好:http://jsbin.com/aqoke3/4/edit< /强>
I found the issue. I am dealing with it properly after all. I managed to remove the P from the jsonp dataType.
All is well: http://jsbin.com/aqoke3/4/edit