用jq实现仿百度搜索框

百度搜索框看似简单，但是涉及到了数据交互，如果能用vue来实现的话会简单很多，现在用jq模仿了一下，写的代码不是一般的多啊！
当然头部要引入jq了

html部分

        <input type="text" id="txt" /><input type="button" id="btn" value="百度一下"/><div class="box" id="box"><ul></ul></div>

css部分

ul,li{list-style: none;margin: 0;padding: 0;}li{line-height:30px;font-size:16px;padding:5px 10px;}li.current{background:#CCCCCC;color:#0000FF;cursor: pointer;}li:hover{background:#CCCCCC;color:#0000FF;cursor: pointer;}

script部分

//要仿百度当然要知道百度的搜索接口
//整理以后的接口https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=&cb=//这部分是根据输入框中的事件来做的事情
//应该使用keyup来判断是否要发送请求，如果使用keydown会发现输入一个词后要再按一下键盘才能发送请求获取数据，使用keyup在输入完词以后就会立即发送请求
var now=-1;       //声明一个变量值为-1，是为了在使用上下键的时候记录li的序号
var resLength=0;  //这个变量是为了存li的长度
$('#txt').keyup(function(event){if(event.keyCode==38 || event.keyCode==40){    //每按一次上下键都会发送一次请求，所以要先return;                                  //清除一边请求};console.log(event.which)var dat={wd:$('#txt').val()};if($('#txt').val()!=''){  //当输入框的值不为空的时候才能发送请求$.ajax({type:"get",url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",async:true,data:dat,dataType : 'jsonp',       //已经跨域了jsonp:'cb',               //百度的回调函数success:function(res){console.log(res.s);for(var i=0;i<res.s.length;i++){resLength=res.s.length;oli_i=$('<li>'+res.s[i]+'</li>');console.log(oli_i)$('#box ul').append(oli_i);//要实现点击某一条词的时候也能让输入框中出现点击的这条词，所以要在success里面设置$('#box ul li').eq(i).click(function(){$('#txt').val($(this).text());$(this).addClass('current').siblings().removeClass('current')})};},error:function(res){console.log(res)  }});}else{$('#box ul').html('')    //如果输入框的词都删除了，把获取的数据结果也清空，因为已经获取到数据了，即使阻止再次发送请求也不会把已经获得的数据清除，所以这里直接用了最简单的办法，直接清空数据};
});//在输入框中按上下键的时候对应的每一条数据的样式要有改变，这里使用了keydown这个事件足够了
$('#txt').keydown(function(ev){if(ev.keyCode==40){         //按下键时，now应该变大now++;$('#box ul li').eq(now).addClass('current').siblings().removeClass('current')$('#txt').val($('#box ul li').eq(now).text())   //resLength表示的是长度，now表示的是序号，所以要用resLength-1if(now==resLength-1){   now=-1;    //当选择的数据已经到了最底部的时候，就要从顶部开始重新循环，所以now又回到-1}};if(ev.keyCode==38){now--;      //按上键的时候，光标往上走，所以now减小  $('#box ul li').eq(now).addClass('current').siblings().removeClass('current');$('#txt').val($('#box ul li').eq(now).text())if(now<-1){now=resLength-1 //当光标走到最上面的时候，再循环到底部重新往上走};};if(ev.keyCode==13){   //当按下回车的时候，应该开始查询具体的结果了，所以这里用的是百度查询的接口window.open('https://www.baidu.com/s?wd='+$('#txt').val())$('#txt').val('');$('#box ul').html('')}
})//点击百度一下这个按钮的时候也要实现跳转页面
$('#btn').click(function(){if($('#txt').val()!=''){window.location.href='https://www.baidu.com/s?wd='+$('#txt').val()$('#txt').val('');$('#box ul').html('')};})

用jq实现仿百度搜索框相关推荐

仿百度搜索框–jQuery版本
仿百度搜索框–jQuery版本时维九月,序属三秋.此吾工作三个月之日,亦是吾重拾博客之时.一路坎坷走来,经历良多,收获甚多. 正题百度搜索框是企业开发中常用的一项功能,作为一个前端工作者,自然也是 ...
html+js仿百度搜索框，点击和回车跳转百度搜索
html+js仿百度搜索框,点击和回车跳转百度搜索代码 <!DOCTYPE html> <html lang="en"> <head>< ...
php百度搜索框代码,基于jquery的仿百度搜索框效果代码_jquery
先看看整个的效果图: 图一: 图二: 图三: 图四: 大概的效果图就这样,接下来直接看源码页面: CSS: .autoSearchText{ border:solid 1px #CFCFCF; he ...
html搜索框下拉怎么做,一步一步教你实现仿百度搜索框下拉效果（上）
最终效果(chrome 下): 搜索框下拉 demo 今天就来简单讲解下如何做这样一个类似百度搜索框的下拉效果. 1.html 以及 css 部分首先你得要有个输入框,这里我用了控件,其次当用户 ...
仿百度搜索框自动下拉提示
摘自 https://www.cnblogs.com/kingshing/p/7389299.html 转载于:https://www.cnblogs.com/JonMingrev/p/1015380 ...
ajax仿百度搜索效果,利用autocomplete.js实现仿百度搜索效果（ajax动态获取后端[C#]数据）...
实现功能描述: 1.实现搜索框的智能提示 2.第二次浏览器缓存结果 3.实现仿百度搜索 * { margin: 0px; padding: 0px; } #wrapper { height: 100% ...
百度搜索框怎么用HTML做,百度搜索框的基本实现
百度首页搜索框是这样的一个基本形式,我们搜索框里输入字符时就能显示出一些有关的联想词,如图2所示图1.png 图2.png 那么今天我们来写一下这种效果,不算一模一样,大概相同吧,哈哈. 第一步:在 ...
vue-resource使用 (vue仿百度搜索)
1.this.$http.get()方法 2.this.$http.post()方法 3.this.$http.jsonp()方法 (vue仿百度搜索) 在输入框中输入a, 然后在百度f12 ==&g ...
站长工具|百度搜索框提示功能
百度向站长开放免费"百度搜索框"代码和"百度搜索框提示"代码.只需进行简单的设置, 即可将" 百度搜索框( 带提示功能)"功能快速加入到您的 ...

用jq实现仿百度搜索框

用jq实现仿百度搜索框相关推荐

最新文章

热门文章