jsonp跨越请求百度搜索api 实现下拉列表提示

题目来源：　　

　　　　最近在做百度IFE前端技术学院的题,然后有一题就是模拟百度搜索智能提示。题目是开源的，稍后给出地址。

　　　　因为博主没学过后端啊，欲哭无泪，所以不能实现后端模糊搜索，那如果前端ajax纯粹请求一份同样的数据，效果就不好。

　　　　机智的博主直接把百度搜索api借来一下。

　　　　直接从开发者工具，监控网络，找到请求地址。

　　百度api：

　　　　我把api缩减了一下，删除了大部分暂时用不上的参数。

　　　　https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=abc&json=1&p=3&cb=Aralic&t

 　参数说明：

　　　　　　在这里只需要关注两个参数，第一个就是要请求的关键字，第二个是回调函数。相信太多人都了解jsonp，全称是json with padding。如果有不熟悉的，可以从园子里面看看其他大牛的博客先了解一下。

　　html代码：

<div id="container">    <input type="text" id="kw">    <ol id="dataList">    </ol></div>

//按键抬起事件function getData() {  //下拉提示列表  var oDataList = $('#dataList');  //搜索框  var sInput = $('#kw');  var oldValue = null;  //当前文本框的值不为空 且和之前不相同  if (sInput.value != '' && sInput.value != oldValue) {    //创建script标签    var oScript = document.createElement('script');    //获取时间戳    var oTime = new Date().getTime()    oScript.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+(sInput.value)+'&json=1&p=3&cb=Aralic&oTime';    document.body.appendChild(oScript);  } else if (sInput.value == '') {    // 如果文本框值为空 清除oDataList的内容并隐藏    oDataList.style.display = 'none';    oDataList.innerHTML = "";  }   oldValue = sInput.value;}

　　　　3、数据的处理，这是jsonp请求的数据，所以需要在全局新建一个一个函数。参数为data（jsonp发送来的数据);

　　　　　　可以直接从chrome开发者工具，网络下找到请求，然后右侧有个Preview可以预览返回的数据，当然也有更简单的一个格式化方法

　　　　　　直接在函数里面控制台打印数据，这样阅读格式化的数据了。

　　　　　　返回了一个json数据，q表示搜索关键字，s是数组类型，返回的匹配值。

　　　　　　4、数据的处理并且添加到页面中。

原标题：jsonp跨越请求百度搜索api 实现下拉列表提示

关键词：JS