JQuery跨域调用淘宝的自动补全数据

 

      今天对我的“来淘宝了网 ”做了一个小小的优化,本身这个网站是有搜索框的,但是经过这段时间的统计结果来看,很多用户并不能很好的使用搜索功能,他们不能很准确的选择关键字,导致他们最终并不能得到自己想要的结果。

      当初google提出的这个自动补全功能还是非常经典的,因为大家经常搜索的关键字是相对固定的,对于普通用户这些也就足够了,当然后来淘宝也使用了这个自动补全功能,所以我也想在我的网站上加上这么一个功能。因为我本身没有淘宝的那么多的统计数据,所以说这个关键字的选取我是很难做出统计的。所以我就像直接调用淘宝的数据,然后再我的网站页面进行操作,形成自动补全提示框。

      然后我就用jquery的ajax调用做了一个简单的获取数据,跟以前用的调用自己网站的数据方式一样,但是这一次报了这么一个错误,火狐下报错为:Access to restricted URI denied" code: "1012,网上查了一下,原来如果从我的网站向淘宝发送请求时跨域访问,浏览器出于安全考虑是不允许这么做的。但是淘宝对这一方面还是有考虑的,他们允许其他的网站调用他们的自动补全数据,因为他们提供了这么一个接口http://suggest.taobao.com/sug?q=s&code=utf-8&callback=TB.Suggest.callback。我们只需要将callback后面的TB.Suggest.callback换成我们自己的方法,当数据传输回来的时候就会执行我们定义好的方法。

      而JQuery正好提供了一个使用该接口的方法,下面是我获取淘宝自动补全数据的方式,

$.ajax({
       type : "GET",
	url : "http://suggest.taobao.com/sug?code=utf-8&callback=?&q=" + wordText,
	dataType : "jsonp",
	jsonp: 'callback',
	success : function(json){
              alert(json);
        }
});

 这样就可以获取到淘宝自动补全传递过来的数据了,下面剩下的就是利用这些数据构建自己的自动补全提示框了。

 

演示地址:http://www.laitaobaole.com ,欢迎大家批评指正。。。。


JQuery跨域调用淘宝的自动补全数据