百度搜狗等搜索引擎智能提示（JSONP跨域实现自动补全搜索建议）

---------------------------------------搜索引擎JSONP接口---------------------------------------------

提示：URL中的 #content# 为搜索的 关键字

谷歌（Google）

http://suggestqueries.google.com/complete/search?client=youtube&q=#content#&jsonp=window.google.ac.h

callback：window.google.ac.h

 

必应（Bing）

http://api.bing.com/qsonhs.aspx?type=cb&q=#content#&cb=window.bing.sug

 callback：window.bing.sug

 

百度（Baidu）

http://suggestion.baidu.com/su?wd=#content#&cb=window.baidu.sug

callback：window.baidu.sug

 

好搜（So）

https://sug.so.360.cn/suggest?encodein=utf-8&encodeout=utf-8&format=json&word=#content#&callback=window.so.sug

callback：window.so.sug

 

搜狗（Sogou）

 https://www.sogou.com/suggnew/ajajjson?type=web&key=#content#

 callback：window.sogou.sug

 

 淘宝（Taobao）

 https://suggest.taobao.com/sug?code=utf-8&q=#content#&callback=window.taobao.sug

 callback：window.taobao.sug

 

---------------------------------------搜索建议使用方式---------------------------------------------

 以百度为例，API返回的是JSONP数据，JSONP是跨域访问的一种方式。由于服务器返回的JavaScript代码可以直接引用，通过回调函数的方式就可以间接的获取服务器的数据。

 下面是一个回调搜索建议的例子，window.baidu.sug 返回的是一个json对象

控制台打印的结果：如果要将结果保存在一个字符串数组中，只需要 var arr = json.s 即可。

以上是转载内容，这里我们简单了解下跨域

跨域是由浏览器同源策略引起的，是指页面请求的接口地址，必须与页面url地址处于同域上（即域名，端口，协议相同）。这是为了防止某域名下的接口被其他域名下的网页非法调用，是浏览器对JavaScript施加的安全限制。

前端解决跨域问题常用的解决方案是：

• JSONP：利用script标签可跨域的特点，在跨域脚本中可以直接回调当前脚本的函数。

• CORS：服务器设置HTTP响应头中Access-Control-Allow-Origin值，解除跨域限制。

我们也可以用ajax来获取百度搜索框的数据，同样也使用jsonp的跨域方式

以百度为例：

首先，我们得先找到百度搜索框的接口，获取里面的数据，再传到我们自己的页面上，获取到的接口是

；

怎样获取百度的接口？打开百度首页，按下F12打开开发者工具，在百度搜索框中随便输入字段，在Network中抓取到接口；

抓取之后，就可以进行操作了，我用的是jQuery写的代码；

看一下效果图：