模拟百度

Posted 2020-09-24

  今天来写下类似于百度搜索的一个东西，获取百度接口，利用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  给我留言  咱们一起讨论吧！