JavaScript_DOM 百度搜索框

Posted zxnn

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript_DOM 百度搜索框相关的知识,希望对你有一定的参考价值。

今天给大家带来的事一个简单的百度的历史搜索框,大家在搜索东西的时候,百度会自动给你显示你最近搜索过的一些东西,那这个拿js怎么做呢?

我们一起来学习吧

这是一个html页面:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <link rel="shortcut icon" type="images/x-icon" href="favicon.ico">
 6         <title>百度一下,你就知道</title>
 7         <link rel="stylesheet" type="text/css" href="css/index.css"/>    
 8     </head>
 9     <body>
10         <header>
11             <div class="hea_left">
12                 <a href="#">太原:</a>
13                 <a href="#"><img src="img/a1.png"/ class="weather"> 7℃</a>
14                 <a href="#"><span class="gr">轻度</span></a>
15                 <a href="#">105&nbsp;&nbsp;&nbsp;|</a>
16                 <a href="#" class="a1">换肤</a>
17                 <a href="#" class="a1">消息提示</a>
18                 <a href="#" class="a1">显示频道</a>                            
19             </div>
20             <div class="hea_rig">
21                 <a href="#" class="a2">新闻</a>
22                 <a href="#" class="a2">hao 123</a>
23                 <a href="#" class="a2">地图</a>
24                 <a href="#" class="a2">视频</a>
25                 <a href="#" class="a2">贴吧</a>
26                 <a href="#" class="a2">学术</a>
27                 <a href="#" class="a2">登陆</a>
28                 <a href="#" class="a2">设置</a>
29                 <a href="#" class="a3">更多产品</a>
30             </div>
31         </header>
32         <div id="logo">
33             <img src="img/superlogo.png"/>
34         </div>
35         <div class="box">
36             <input type="text" name="" id="inp" value=""/>
37             <div class="xj"></div>
38             <button id="but" onclick="onclickBut()">百度一下</button>
39         <ul>
40             <li>中共十九届二中全会公报公布</li>
41             <li>特朗普就任一周年 美国联邦政府正式“关门”</li>
42             <li>医生拄着拐杖做手术:病人多医生少,能做就做</li>
43         </ul>
44         </div>
45         <div class="footer">
46             <a href="" class="foot_a">设为首页</a>
47             <span class="foot_text">@2018 Baidu</span>
48             <a href="" class="foot_a">使用百度前必读</a>
49             <a href="" class="foot_a">意见反馈</a>
50             <span class="foot_text">京ICP证030173号</span>
51             <img src="img/copy_rignt_24.png"/>
52             <br />
53             <img src="img/icon-police.png" class="beian"/><span class="foot_text">京公网安备11000002000001号</span>
54         </div>
55         <script src="js/index.js" type="text/javascript" charset="utf-8"></script>
56     </body>
57 </html>

 

这是一个Css页面:

 

 1 *{padding: 0;margin: 0;}
 2 body,html{width: 100%;height: 100%;background: url(../img/12.jpg) no-repeat;background-size:100% 100%;    overflow: hidden;}
 3 a{text-decoration: none;color: #fff;}
 4 header{width: 100%;height: 32px;background-color: rgba(15,25,50,.3);line-height: 32px;padding-left:10px;font-size: 14px;}
 5 .hea_left{float: left;}
 6 .hea_rig{float: right;}
 7 .gr{color: #badc00;font-weight: bold;}
 8 .a1{margin-left: 10px;text-decoration: underline;font-size: 12px;}
 9 .a2{margin-right: 20px;text-decoration: underline;font-size: 14px;font-weight: bold;}
10 .a3{display: block;float: right;width: 100px;height: 32px;background: #398bfb;text-align: center;line-height: 32px;}
11 #logo{width: 350px;height: 148px;margin: 6% auto;margin-bottom:2%;}
12 #logo img{cursor: pointer;width: 100%;height: 100%;}
13 .box{width: 660px;height: 300px;margin: 0 auto;position: relative;    }
14 .xj{cursor: pointer;width: 24px;height: 22px;position: absolute;right:140px;top: 10px;background: url(../img/pir.png);background-size: 100% 100%;}            
15 .xj:hover{background: url(../img/xj.png);background-size: 100% 100%;}
16 #inp{box-sizing: border-box;width: 536px;height: 45px;border: none;text-indent: 1em;}            
17 #but{width: 120px;height: 45px;background: url(../img/an_bg.jpg) no-repeat;background-size: 100% 100%;border: none;margin-left:-4px;margin-top:-4px ;cursor:pointer;}
18 #but:focus{background: url(../img/an1_bg.jpg) no-repeat;background-size: 100% 100%;}
19 ul{width: 536px;background: #fff;display: none;}
20 li{list-style: none;line-height: 40px;text-indent: 1em;}
21 li:hover{background: #eee;cursor: pointer;}
22 .footer{width:100%;text-align: center;}
23 .foot_a{margin-right: 4px;text-decoration: underline;font-size: 12px;}
24 .foot_text{color: #fff;font-size: 12px;}
25 .beian{display: inline-block;margin-right: 6px;vertical-align: middle;}

 

 

最后就是js的代码了 ,方法有很多哦

 1     //方法1
 2     var but = document.getElementById("but");       //获取button百度按钮框
 3     var arr = document.getElementsByTagName(‘li‘);  //获取要显示的li
 4     var inp = document.getElementById("inp");        //获要输入的内容的input
 5     var ul = document.getElementsByTagName(‘ul‘)[0];   //获取ul
 6     function onclickBut(){                 //
 7     for (var i=2;i>=0;i--){                
 8         if(i==0){
 9             arr[i].innerHTML=inp.value;
10         }else{
11             arr[i].innerHTML=arr[i-1].innerHTML;
12         }
13     } 
14     //将百度作为连接,传入value的内容,并跳入新的页面
15     window.location.href ="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd="+inp.value;
16     }
17 
18     //input和button聚焦和失焦的状态
19     inp.onfocus = but.onfocus = function(){
20         ul.style.display = ‘block‘;
21     }
22     inp.onblur = but.onblur = function(){
23         ul.style.display = ‘none‘;
24     }
25     //在input框中回车时
26     inp.onkeydown = function(Ent){
27         if(Ent.keyCode == 13){        
28             onclickBut();             
29         }
30      }
31     //点击输入过的value内容直接在input框显示
32     for(var x of arr){
33         x.onmousedown = look ;    
34     }
35     function look(){
36         inp.value = this.innerHTML;
37     }
38             
39 
40 //数组
41 //            var a = new Array();
42 //            var but = document.getElementById("but");
43 //            var inp = document.getElementById("inp");
44 //            var lis = document.getElementsByTagName(‘li‘);
45 //            
46 //            but.onfocus = function(){  
47 //                var inps = inp.value;
48 //                a.unshift(inps);
49 //                a.length = 3;
50 //                console.log(a);
51 //                for(i=0;i<a.length;i++){
52 //                    if(a[i]!=undefined)
53 //                    lis[i].innerHTML = a[i];
54 //                }
55 //            }

 

 

我只是简略的写了一些,如果你有更好的方法记得我们一起探讨哦~~~

另外,以上代码如果哪里我bug随时欢迎帮我指正,谢谢

以上是关于JavaScript_DOM 百度搜索框的主要内容,如果未能解决你的问题,请参考以下文章

站长工具|百度搜索框提示功能

后端Java工程师常用JavaScript_DOM

C#中如何实现百度搜索框的效果

模拟百度搜索框,输入时显示历史记录

js借助JSONP实现百度搜索框提示效果

如何制作一个必应(百度)搜索框?