模擬百度
今天來寫下類似於百度搜索的一個東西，獲取百度接口，利用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 給我留言 咱們一起討論吧！
模擬百度