远程数据源如何在Jquery Mobile自动完成中工作?

时间:2015-11-03 15:38:08

标签: javascript jquery jquery-mobile autocomplete

我正在阅读此页面http://demos.jquerymobile.com/1.4.5/listview-autocomplete-remote/,似乎没有关于远程数据源看起来如何或正常工作的文档。

在该页面中,您可以看到远程数据源的JS示例为http://gd.geobytes.com/AutoCompleteCity,但转到该URL并未显示任何内容。

是否有人知道如何构建它以便与自动填充页面一起使用?

1 个答案:

答案 0 :(得分:1)

数据以JSON格式返回。在文档示例中,如果您查看JS代码:

$.ajax({
dataType: "jsonp"
...
.then(function(response) {  // <-- this expects response as a JSON object
$.each(response,function(i,val){  // <-- each iterates over the array, i is the index, val is the value
    html+="<li>"+val+"</li>"; //<-- creates the HTML for the autocomplete

})

事实上,您可以使用Chrome上的Google开发者工具查看回复。在示例中,如果您编写“Ale”,则会获得:

jQuery1102023577826283872128_1446566971852(["Aledo, IL, United States","Aledo, MU, Spain","Aledo, TX, United States","Aleknagik, AK, United States","Aleppo, HL, Syria","Aleppo, PA, United States","Alert, NT, Canada","alesund, MR, Norway","Alex, OK, United States","Alexander City, AL, United States","Alexander, AR, United States","Alexander, IA, United States","Alexander, IL, United States","Alexander, KS, United States","Alexander, NC, United States","Alexander, ND, United States","Alexander, NY, United States","Alexandra Headland, QL, Australia","Alexandra Hills, QL, Australia","Alexandra, GT, South Africa"]);

您可以使用变量q尝试将查询作为参数传递的示例的URL:

http://gd.geobytes.com/AutoCompleteCity?q=abe