今天来写下类似于百度搜索的一个东西，获取百度接口，利用jsonp获取百度数据 ，实现百度框搜索的功能！
我是用jq来些的 ，我们先引入jq。
<script src="jquery.min.js>
还有我们封装的一个jsonp的一个js 这只是个插件 直接引入即可
<script src= baidujsonp.js>
来写我们的html代码
<div style="width: 40%; margin: 100px auto;">
<input type="text" id="txt" style="width: 100%; height: 30px;"/>
<ul id="ul11" ></ul>
</div>
效果是这样的
var oTxt = document.getElenentById("txt") //获取input
var index = -1; //定义input的键盘抬起事件 从-1开始
因为当我们的键盘抬起的时候就开始获取百度的数据了，所以我们给搜索框来个键盘松开事件抬起事件
$("#txt").on(‘keyup‘,function(event){
event = event||window.event //获取event事件
if(event.keyCode==40){ //键码为40 向上键
index==$("#ul11>li").length - 1 ? index=-1 :null; //三目运算符 判断下标是否等于li 的长度 成立 下标等于-1 不成立则为空
index++;
$("#ul11>li").eq(index).css("background", "#ccc").siblings("li").css("background", "none"); // 当前下标的li 的css背景颜色 为灰色 他的兄弟li背景颜色为空
$("#txt").val($("#ul11>li").eq(index).text()); //搜索框里的内容就是 你选择的当前的li的内容
}else if(event.keyCode == 38){ // 键码为38 向下键
index == 0 ? index = $("#ul11>li").length : null; //同上 判断
index--；
$("#ul11>li").eq(index).css("background", "#ccc").siblings("li").css("background", "none"); //同上
$("#txt").val($("#ul11>li").eq(index).text()); //同上
}else if(event.keyCode == 13) { //当键码为13 13为Enter 确认键
location.href = ‘https://www.baidu.com/s?wd=‘+$("#txt").val()+‘‘;
}else{
jsonp({
url: ‘https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su‘, //获取百度接口
data: {
wd: oTxt.value //data 要搜索的内容
},
cbName:"cb", //cbName = cb
success: function (json) { //成功时有一个回调函数 json是获取到的数据
var str = ""; //设置一个 空的字符串
for (var i in json.s) { //遍历 数据里的s
str += "<li><a href=‘https://www.baidu.com/s?wd="+json.s[i]+"‘>" + json.s[i] + "</a></li>" //str 里添加li
}
$(‘#ul11‘).html(str); //ul里添加li
}
})
}
})
基本的就时这些了 如果还有那些不明白的 或者想要 封装好的jsonp的js 给我留言 咱们一起讨论吧！