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 ，欢迎大家批评指正。。。。