今天给大家带来的事一个简单的百度的历史搜索框，大家在搜索东西的时候，百度会自动给你显示你最近搜索过的一些东西，那这个拿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. 小白的Python之路 PEP8 代码风格

    转载自http://www.douban.com/note/134971609/ Python 的代码风格由 PEP 8 描述.这个文档描述了 Python 编程风格的方方面面.在遵守这个文档的条件下 ...

  2. iOS动态性 运行时runtime初探(强制获取并修改私有变量，强制增加及修改私有方法等)

    借助前辈的力量综合一下资料. OC是运行时语言,只有在程序运行时,才会去确定对象的类型,并调用类与对象相应的方法.利用runtime机制让我们可以在程序运行时动态修改类.对象中的所有属性.方法,就算是 ...

  3. Paho - MQTT C Cient的实现

    来自我的CSDN博客   在前几天,我大致了解了一下Paho C项目,并对其的一些内容进行了翻译.俗话说,光说不练假把戏,今天就给大家讲一下使用Paho的客户端库文件实现MQTT C Client的过 ...

  4. UWP 使用OneDrive云存储2.x api（二）【全网首发】

    接上一篇 http://www.cnblogs.com/hupo376787/p/8032146.html 上一篇提到为了给用户打造一个完全无缝衔接的最佳体验,UWP开发者最好也要实现App设置和数据 ...

  5. 关于java字节流的read()方法返回值为int的思考

    我们都知道java中io操作分为字节流和字符流,对于字节流,顾名思义是按字节的方式读取数据,所以我们常用字节流来读取二进制流(如图片,音乐 等文件).问题是为什么字节流中定义的read()方法返回值为 ...

  6. IE下判断IE版本的语句...[if lte IE 8]……[endif]

    <!--[if lte IE 6]> <![endif]--> IE6及其以下版本可见   <!--[if lte IE 7]> <![endif]--> ...

  7. Keras:基于Theano和TensorFlow的深度学习库

    catalogue . 引言 . 一些基本概念 . Sequential模型 . 泛型模型 . 常用层 . 卷积层 . 池化层 . 递归层Recurrent . 嵌入层 Embedding 1. 引言 ...

  8. npm 项目更换目录后无法启动

    问题描述: 使用 Vue-cli 创建的项目,当文件移动到其他目录后,无法正常启动,报错信息如下: 分析原因: npm 项目,在安装依赖(node_modules)的时候,会记录当前的文件路径.当路径 ...

  9. MyEclipse 2015利用Cygwin+CDT搭建C/C++开发环境

    GitHub原文:https://github.com/x113773/testall/issues/22 首先安装Cygwin 1:首先去网站 www.cygwin.com 下载 Cygwin 的 ...

  10. Micropython实例之TPYBoard来电显示功能演示

    一.TPYBoardV702介绍 TPYBoardV702是目前市面上唯一支持通信通信功能的MicroPython开发板:支持Python3.0及以上版本直接运行.支持GPS+北斗双模通信.GPRS通 ...