注意事项：

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. C - How Many Tables 并查集

    Today is Ignatius' birthday. He invites a lot of friends. Now it's dinner time. Ignatius wants to kn ...

  2. [bzoj1563][NOI2009]诗人小G（决策单调性优化）

    题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=1563 分析: 首先可得朴素的方程:f[i]=min{f[j]+|s[j]-j-s[i] ...

  3. 非常适合新手的jq/zepto源码分析06 -- 事件模型

    复习下事件的有关内容: 1.现在用的绑定/删除: obj.addEventListener(type,fn,false) obj.removeEventListener(type) obj.attac ...

  4. mybatis中的map.xml文件中sql语句需要分号吗？

    mybatis中的map.xml文件中sql语句需要分号吗? :你是说sql介绍的分号吗?不需要的

  5. 到底什么是RPC？

    RPC:远程过程调用,是一种同意分布式应用程序调用网络上不同计算机的可用服务的机制.RPC服务会在注冊表中给自己注冊一个UUID,成为通用唯一标识符.这个UUID针对每一项服务都是一个唯一的值,且在全 ...

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

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

  7. JavaSE入门学习12： Java面相对象之static使用方法

    我们能够基于一个类创建多个该类的对象,每一个对象都拥有自己的成员,互相独立. 然而在某些时候,我们更希 望该类全部的对象共享同一个成员. 此时就是static大显身手的时候了. Java中被stati ...

  8. C++ 訪问控制权限图解

    基类訪问权限 类继承方式 子类訪问权限           public   public   protected public protected   private   No Access   p ...

  9. vim入门级使用

    1.刚进入是 command mode 命令行模式 2.i  进入插入 insert  mode 模式 在插入模式下只能 输入内容,如果要删除内容,需要切换到命令行模式,移动光标进行删除. 3.esc ...

  10. ROS人脸检测 使用webcam实现

    github地址https://github.com/ngunauj/facedetection 熟悉ros环境.ubuntu16.04 + ros kinetic版本.使用笔记本自带摄像头,完成人脸 ...