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

我们一起来学习吧

这是一个HTML页面：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <link rel="shortcut icon" type="images/x-icon" href="favicon.ico">

         <title>百度一下，你就知道</title>

         <link rel="stylesheet" type="text/css" href="css/index.css"/>

     </head>

     <body>

         <header>

             <div class="hea_left">

                 <a href="#">太原：</a>

                 <a href="#"><img src="img/a1.png"/ class="weather"> 7℃</a>

                 <a href="#"><span class="gr">轻度</span></a>

                 <a href="#">105&nbsp;&nbsp;&nbsp;|</a>

                 <a href="#" class="a1">换肤</a>

                 <a href="#" class="a1">消息提示</a>

                 <a href="#" class="a1">显示频道</a>

             </div>

             <div class="hea_rig">

                 <a href="#" class="a2">新闻</a>

                 <a href="#" class="a2">hao 123</a>

                 <a href="#" class="a2">地图</a>

                 <a href="#" class="a2">视频</a>

                 <a href="#" class="a2">贴吧</a>

                 <a href="#" class="a2">学术</a>

                 <a href="#" class="a2">登陆</a>

                 <a href="#" class="a2">设置</a>

                 <a href="#" class="a3">更多产品</a>

             </div>

         </header>

         <div id="logo">

             <img src="img/superlogo.png"/>

         </div>

         <div class="box">

             <input type="text" name="" id="inp" value=""/>

             <div class="xj"></div>

             <button id="but" onclick="onclickBut()">百度一下</button>

         <ul>

             <li>中共十九届二中全会公报公布</li>

             <li>特朗普就任一周年 美国联邦政府正式“关门”</li>

             <li>医生拄着拐杖做手术：病人多医生少，能做就做</li>

         </ul>

         </div>

         <div class="footer">

             <a href="" class="foot_a">设为首页</a>

             <span class="foot_text">@2018 Baidu</span>

             <a href="" class="foot_a">使用百度前必读</a>

             <a href="" class="foot_a">意见反馈</a>

             <span class="foot_text">京ICP证030173号</span>

             <img src="img/copy_rignt_24.png"/>

             <br />

             <img src="img/icon-police.png" class="beian"/><span class="foot_text">京公网安备11000002000001号</span>

         </div>

         <script src="js/index.js" type="text/javascript" charset="utf-8"></script>

     </body>

 </html>

这是一个Css页面：

 *{padding:;margin:;}

 body,html{width: 100%;height: 100%;background: url(../img/12.jpg) no-repeat;background-size:100% 100%;    overflow: hidden;}

 a{text-decoration: none;color: #fff;}

 header{width: 100%;height: 32px;background-color: rgba(15,25,50,.3);line-height: 32px;padding-left:10px;font-size: 14px;}

 .hea_left{float: left;}

 .hea_rig{float: right;}

 .gr{color: #badc00;font-weight: bold;}

 .a1{margin-left: 10px;text-decoration: underline;font-size: 12px;}

 .a2{margin-right: 20px;text-decoration: underline;font-size: 14px;font-weight: bold;}

 .a3{display: block;float: right;width: 100px;height: 32px;background: #398bfb;text-align: center;line-height: 32px;}

 #logo{width: 350px;height: 148px;margin: 6% auto;margin-bottom:2%;}

 #logo img{cursor: pointer;width: 100%;height: 100%;}

 .box{width: 660px;height: 300px;margin: 0 auto;position: relative;    }

 .xj{cursor: pointer;width: 24px;height: 22px;position: absolute;right:140px;top: 10px;background: url(../img/pir.png);background-size: 100% 100%;}

 .xj:hover{background: url(../img/xj.png);background-size: 100% 100%;}

 #inp{box-sizing: border-box;width: 536px;height: 45px;border: none;text-indent: 1em;}

 #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;}

 #but:focus{background: url(../img/an1_bg.jpg) no-repeat;background-size: 100% 100%;}

 ul{width: 536px;background: #fff;display: none;}

 li{list-style: none;line-height: 40px;text-indent: 1em;}

 li:hover{background: #eee;cursor: pointer;}

 .footer{width:100%;text-align: center;}

 .foot_a{margin-right: 4px;text-decoration: underline;font-size: 12px;}

 .foot_text{color: #fff;font-size: 12px;}

 .beian{display: inline-block;margin-right: 6px;vertical-align: middle;}

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

     //方法1

     var but = document.getElementById("but");       //获取button百度按钮框

     var arr = document.getElementsByTagName('li');  //获取要显示的li

     var inp = document.getElementById("inp");        //获要输入的内容的input

     var ul = document.getElementsByTagName('ul')[0];   //获取ul

     function onclickBut(){                 //

     for (var i=2;i>=0;i--){

         if(i==0){

             arr[i].innerHTML=inp.value;

         }else{

             arr[i].innerHTML=arr[i-1].innerHTML;

         }

     }

     //将百度作为连接,传入value的内容,并跳入新的页面

     window.location.href ="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd="+inp.value;

     }

     //input和button聚焦和失焦的状态

     inp.onfocus = but.onfocus = function(){

         ul.style.display = 'block';

     }

     inp.onblur = but.onblur = function(){

         ul.style.display = 'none';

     }

     //在input框中回车时

     inp.onkeydown = function(Ent){

         if(Ent.keyCode == 13){

             onclickBut();

         }

      }

     //点击输入过的value内容直接在input框显示

     for(var x of arr){

         x.onmousedown = look ;

     }

     function look(){

         inp.value = this.innerHTML;

     }

 //数组

 //            var a = new Array();

 //            var but = document.getElementById("but");

 //            var inp = document.getElementById("inp");

 //            var lis = document.getElementsByTagName('li');

 //

 //            but.onfocus = function(){

 //                var inps = inp.value;

 //                a.unshift(inps);

 //                a.length = 3;

 //                console.log(a);

 //                for(i=0;i<a.length;i++){

 //                    if(a[i]!=undefined)

 //                    lis[i].innerHTML = a[i];

 //                }

 //            }

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

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

【JavaScript_DOM 百度搜索框】的更多相关文章

  1. Ajax以及类似百度搜索框的demo

    public class Ajax01 extends HttpServlet{ @Override protected void service(HttpServletRequest request ...

  2. JavaScript实现模糊推荐的input框(类似百度搜索框)

    如何用JS实现一个类似百度搜索框的输入框呢,再填充完失去焦点时,自动填充配置项,最终效果如下图: 实现很简单,但是易用性会上升一大截,需要用到的有jquery-ui的autocomplete,jque ...

  3. 使用 Vue.js 2.0+ Vue-resource 模仿百度搜索框

    使用 Vue.js 2.0 模仿百度搜索框 <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...

  4. React实现最完整的百度搜索框

    import React,{Component} from 'react' import ReactDOM,{render} from 'react-dom' import 'bootstrap/di ...

  5. Ajax跨域：Jsonp实例--百度搜索框下拉提示

    Ajax跨域:Jsonp实例--百度搜索框下拉提示 一.总结 一句话总结:a.找好接口:b.用script标签的src引入文件(json数据):c.定义及实现上一步引入文件中的函数 1.如何找到一个网 ...

  6. window系统谷歌浏览器百度搜索框光标不能输入并且不显示光标----自制bug以及解决

    --------------------bug无处不在------------------------- 今天在搞代码的时候,保存文件无意中犯了个致命错误,文件名称写入非法字符,可能与Windows系 ...

  7. JS---DOM---案例：模拟百度搜索框

    模拟百度搜索框 我的思路整理: 1. 注册文本框抬起事件(onkeyup) 2. 处理函数: --->创建临时数组,循环遍历文本框键入的文字内容和keywords数组,用keyWords[i]. ...

  8. js实现百度搜索框滑动固定顶部

    现在很多主流系统例如百度.有道.爱奇艺等的搜索框都有一个特点,滑动到刚好看不到搜索框时,固定搜索框到顶部,这也算是一个对用户友好型的操 作. 在看了百度的js和css后自己摸索出来实现效果,还是学艺不 ...

  9. typecho博客组插件:openSug.js百度搜索框下拉提示免费代码

      Typecho候选搜索增强插件:安装openSug插件即可获得带有“搜索框提示”功能的搜索框,让Typecho搜索更便捷! 支持百度.谷歌.雅虎.Yandex.360好搜.UC神马.酷狗.优酷.淘 ...

随机推荐

  1. 自学Zabbix9.3 zabbix客户端自动注册

    自学Zabbix9.3 zabbix客户端自动注册 1. 概述 网络自动发现配置,只要就是zabbix server去扫描一个网段,把在线的主机添加到Host列表中.但是Active agent是主动 ...

  2. 对Java中多态，封装，继承的认识（重要）

                                                            一.Java面向对象编程有三大特性:封装,继承,多态 在了解多态之前我觉得应该先了解一下 ...

  3. 小白的Python之路 day1 字符编码

    字符编码 python解释器在加载 .py 文件中的代码时,会对内容进行编码(默认ascill) ASCII(American Standard Code for Information Interc ...

  4. 小型Web页打包优化（下）

    之前我们推送了一篇小型Web项目打包优化文章,(链接),我们使用了一段时间, 在这过程中我们也一直在思考, 怎么能把结构做的更好.于是我们改造了一版, 把可以改进的地方和可能会出现的问题, 在这一版中 ...

  5. go实例之排序

    1.默认排序 使用sort包进行排序.排序是就地排序,因此它会更改给定的切片,并且不返回新的切片. package main import "fmt" import "s ...

  6. 【Netty】源码分析目录

    前言 为方便系统的学习Netty,特整理文章目录如下. [Netty]第一个Netty应用 [Netty]Netty核心组件介绍 [Netty]Netty传输 [Netty]Netty之ByteBuf ...

  7. 算法分析| 小o和小ω符号

    渐近分析的主要思想是对不依赖于机器特定常数的算法的效率进行测量,主要是因为该分析不需要实现算法并且要比较程序所花费的时间. 我们已经讨论了三个主要的渐近符号.本文我们使用以下2个渐近符号表示算法的时间 ...

  8. 【转】教你开发jQuery插件

    阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原文:http://www.cnblo ...

  9. 微信小程序开发模板消息的时候 出现 errcode: 41028, errmsg: "invalid form id hint:

    小程序开发模板消息的时候  出现 errcode: 41028, errmsg: "invalid form id hint: 我是使用的微信支付发送模板消息,提示的formid无效的 大家 ...

  10. python科学计算_numpy_ufunc

    ufunc简介 ufunc指universal function,是一种能够对数组中的所有元素进行操作的函数,ufunc是针对数组进行操作的函数,对一个数组进行重复的运算时,使用ufunc比math库 ...