注意事项：

1、for循环移除子节点时，其长度是变化的

2、在文档流中，input、img、p等标签与其他标签有3px的距离，利用左浮动，可以消除3px距离

3、背景图片定位时，第一个值是x轴方向的值，第二值是y轴方向的值

4、大多时候input标签outline属性时都设置为none，然后为其注册事件改变它的border颜色

5、indexOf方法返回符合条件的字符串的索引值，没有符合条件的情况下返回-1

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        .box1 {

            width: 500px;

            height: 36px;

            margin: 0 auto;

            margin-top: 50px;

            position: relative;

        }

        input[type="text"] {

            float: left;

            width: 355px;

            height: 34px;

            padding-left: 5px;

            padding-right: 40px;

            border: 1px solid #b8b8b8;

            border-right: 0px;

            /*text-indent: 1em;*/

            outline: none;

        }

        span {

            position: absolute;

            width: 18px;

            height: 16px;

            top: 50%;

            margin-top: -8px;

            right: 106px;

            background: url("image/baidu.png");

        }

        span:hover {

            cursor: pointer;

            background-position: 0 -20px;

        }

        button {

            float: left;

            width: 99px;

            height: 36px;

            background-color: #38f;

            border: 1px solid #38f;

            outline: none;

        }

        button:hover {

            background-color: #317ef3;

            cursor: pointer;

            box-shadow: 1px 1px 1px #ccc;

        }

        ul {

            list-style: none;

            width: 399px;

            background-color: pink;

            border: 1px solid #b8b8b8;

            border-top: none;

        }

        li {

            padding-left: 5px;

        }

        li:hover {

            background-color: #b8b8b8;

        }

    </style>

</head>

<body>

<div class="box1">

    <input type="text">

    <span></span>

    <button>搜索</button>

    <ul>

    </ul>

</div>

</body>

<script>

    var arr = ["a", "ab", "abc", "abcd", "abcde", "abcdef"];

    var inpEle = document.getElementsByTagName("input")[0];

    var ulEle = document.getElementsByTagName("ul")[0];

    //input获得焦点后改变border颜色并且搜索相关词汇

    inpEle.onfocus = function () {

        this.style.borderTop = "1px solid #38f";

        this.style.borderLeft = "1px solid #38f";

        this.style.borderBottom = "1px solid #38f";

        searchWords();

    }

    //input离开焦点后改变border颜色并且搜索相关词汇

    inpEle.onblur = function () {

        this.style.borderTop = "1px solid #b8b8b8";

        this.style.borderLeft = "1px solid #b8b8b8";

        this.style.borderBottom = "1px solid #b8b8b8";

        for (var i = 0; i < ulEle.children.length;) {

            ulEle.removeChild(ulEle.children[i]);

        }

    }

    //input注册键盘弹起事件

    inpEle.onkeyup = searchWords;

    //搜索关联词汇

    function searchWords() {

        if (inpEle.value == "") {

            for (var i = 0; i < ulEle.children.length;) {

                ulEle.removeChild(ulEle.children[i]);

            }

            return;

        }

        //ulEle移除其子节点时，它的长度是变化的

        for (var i = 0; i < ulEle.children.length;) {

            ulEle.removeChild(ulEle.children[i]);

        }

        for (var i = 0; i < arr.length; i++) {

            if (arr[i].indexOf(inpEle.value) === 0) {

                var liEle = document.createElement("li");

                liEle.innerHTML = arr[i];

                ulEle.appendChild(liEle);

            }

        }

    }

</script>

</html>

JS——模拟百度搜索的更多相关文章

  1. 原生JS模拟百度搜索关键字与跳转

    <style type="text/css"> *{ margin: 0; padding: 0; } #text{ width: 300px; height: 30p ...

  2. JavaScript-dom3 json_str dom元素控制 模拟百度搜索

    访问关系-封装代码 html <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

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

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

  4. Splinter学习－－初探1，模拟百度搜索

    Splinter是以Selenium, PhantomJS 和 zope.testbrowser为基础构建的web自动化测试工具,基本原理同selenium 支持的浏览器包括:Chrome, Fire ...

  5. JS 实现百度搜索功能

    今天我们来用JS实现百度搜索功能,下面上代码: HTML部分: <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  6. python--selenium简单模拟百度搜索点击器

    python--selenium简单模拟百度搜索点击器 发布时间:2018-02-28 来源:网络 上传者:用户 关键字: selenium 模拟 简单 点击 搜索 百度 发表文章摘要:用途:简单模拟 ...

  7. 原生JS实现百度搜索功能

    今天呢给大家分享一下自己用原生JS做的一个百度搜索功能,下面上代码: <!DOCTYPE html> <html> <head> <meta charset= ...

  8. asp.net mvc 模拟百度搜索

    页面代码: <td><span>*</span>车牌号码:</td> <td> <div id="search"& ...

  9. JS模拟百度分享侧边栏效果

    模拟百度分享侧边栏的弹出与滑入效果.当鼠标移入#div1分享侧边栏,#div1分享侧边栏区块匀速滑出直至其全部露出.当鼠标移除#div1分享侧边栏,#div1分享侧边栏区块匀速滑入隐藏,直至恢复初始位 ...

随机推荐

  1. GUI 总结（一）

    一/概述 1.两个包: javax.awt //before java 1.2 javax.swing //after java 1.2 2.两个词: 组件Component 容器Container ...

  2. tomcat服务器配置把Http协议强制转化为Https

    1)在命令提示符窗口,进入Tomcat目录,执行以下命令: keytool -genkey -alias tomcat -keyalg RSA -keypass changeit -storepass ...

  3. pt工具加字段脚本

    #!/bin/bashcnn_db=$1table=$2alter_conment=$3 cnn_host='192.168.10.14'cnn_user='root'cnn_pwd='123456' ...

  4. 《Sams Teach Yourself Windows® Workflow Foundation in 24 Hours》读书笔记目录

    目录 1 Part I - The Basics 1.1 Hour 1 - Understanding Windows Workflow Foundation 1.2 Hour 2 - A Spin ...

  5. hdu5305(2015多校2)--Friends（状压，深搜）

    Friends Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Total Su ...

  6. UVa 10954 Add All(优先队列)

    题意  求把全部数加起来的最小代价  a+b的代价为(a+b) 越先运算的数  要被加的次数越多  所以每次相加的两个数都应该是剩下序列中最小的数  然后结果要放到序列中  也就是优先队列了 #inc ...

  7. CentOS 7下安装Hadoop2.2

    这里就介绍CentOS的安装了,直接进入Hadoop2.2伪分布模式安装. 1.安装包下载 1.1.下载JDK1.7 眼下JDK的版本号是jdk1.8.0_25.这里下载的是jdk1.7.0_67. ...

  8. C++中stringstream ostringstream istringstream使用方式

    C++引入了ostringstream.istringstream.stringstream这三个类,要使用他们创建对象就必须包括sstream.h头文件. istringstream类用于运行C++ ...

  9. HDU4689Derangement (动态规划)

    题目链接:传送门 题意: 对于一个由1~n组成的长度为n的序列来说它有n!种排法.我们定义初始的排列为1,2,3,...,n对于兴许的排列假设a[i]>i则用'+'表示.a[i]<i用'- ...

  10. JSP-Runoob：JSP 生命周期

    ylbtech-JSP-Runoob:JSP 生命周期 1.返回顶部 1. JSP 生命周期 理解JSP底层功能的关键就是去理解它们所遵守的生命周期. JSP生命周期就是从创建到销毁的整个过程,类似于 ...