Jquery远程自动完成

时间:2014-12-21 01:46:53

标签: jquery ajax jquery-mobile

我想了解以下演示:http://demos.jquerymobile.com/1.4.0/listview-autocomplete-remote/

在原始演示中,他们向http://gd.geobytes.com/AutoCompleteCity?

发送请求

例如,如果输入是"纽约"请求如下:

http://gd.geobytes.com/AutoCompleteCity?callback=&q=New%20York&_=1419120068976

来自服务器的响应:

["New York Mills, MN, United States","New York Mills, NY, United States","New York, NY, United States","West New York, NJ, United States"]

总的来说,我相信我理解它是如何工作的,现在我的问题是,我正在尝试对我的服务器上的代码进行一次更改。

http://s525504567.onlinehome.us/test/?

我所做的只是一个简单的PHP脚本,为NY输出相同的结果

echo '["New York Mills, MN, United States","New York Mills, NY, United States","New York, NY, United States","West New York, NJ, United States"]';

请求将是:

http://s525504567.onlinehome.us/test/?&callback=jQuery1111008215739631306596_1419126149636&q=New+&_=1419126149640

输出:

["New York Mills, MN, United States","New York Mills, NY, United States","New York, NY, United States","West New York, NJ, United States"]

但它不起作用......

Original Pen : http://codepen.io/anon/pen/WbxPva
Modified pen(only the url) : http://codepen.io/anon/pen/pvbGJY

我遇到的问题是它不起作用。我不明白我在这里做错了什么。

1 个答案:

答案 0 :(得分:1)

您的脚本返回无效的jsonp。在浏览器窗口中加载测试脚本:http://s525504567.onlinehome.us/test/?&callback=jQuery1111008215739631306596_1419126149636&q=New+&_=1419126149640

返回:

jQuery1111008215739631306596_1419126149636( {"total":1,"movies":[{false}

由于您的测试脚本没有输出语法上有效的JSON,因此您的JavaScript回调执行失败。

您应该学习使用可用的调试工具:您的浏览器开发人员工具提供了大量有关JavaScript错误,网络请求和其他信息的信息,以帮助您查明问题。

例如,使用原始笔执行此操作。 Autocomplete调用http://gd.geobytes.com/AutoCompleteCity?&callback=jQuery111107159031711053103_1419138275032&q=new&_=1419138275033返回JSONP数据有效负载:

jQuery111107159031711053103_1419138275032(["New Albany, IN, United States","New Albany, KS, United States","New Albany, MS, United States","New Albany, OH, United States","New Albany, PA, United States","New Albin, IA, United States","New Alexandria, PA, United States","New Almaden, CA, United States","NEW AMSTERDAM, EB, Guyana","New Athens, IL, United States","New Athens, OH, United States","New Auburn, MN, United States","New Auburn, WI, United States","New Augusta, MS, United States","New Baden, IL, United States","New Baden, TX, United States","New Baltimore, MI, United States","New Baltimore, NY, United States","New Baltimore, PA, United States","New Bavaria, OH, United States"]);

jQuery1111....位很重要。它是由调用脚本和响应数据执行的函数。如果要在Codepen上使用它,就需要修改服务器端脚本以返回JSONP,而不仅仅是一个裸数组对象。