注意事项：

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. react 单元测试 (jest+enzyme)

    为什么要做单元测试 作为一个前端工程师,我是很想去谢单元测试的,因为每天的需求很多,还要去编写测试代码,感觉时间都不够用了. 不过最近开发了一个比较复杂的项目,让我感觉一旦项目大了.复杂了,而且还是多 ...

  2. Node: 在Mac中离线安装Sqlite3

    最近在安装db-migrate的时候,有一个依赖包sqlite3怎样都安装不了,检查下来应该是由于node_sqlit3.node文件无法从Amazon下载导致(源码安装也报错,没有研究过原因).于是 ...

  3. jquery simple modal

    窗体API定义丰富,而且使用也很容易上手.官方地址:http://www.ericmmartin.com/projects/simplemodal/从官方下载插件,在文件中引用<script t ...

  4. AE 创建

    using System; using System.Drawing; using System.Runtime.InteropServices; using ESRI.ArcGIS.ADF; usi ...

  5. 大话USB驱动之总线驱动程序

    转载注明出处:http://blog.csdn.net/ruoyunliufeng/article/details/25040009 总线驱动是不用改的.内核都帮我们做好了.为了了解整个USB驱动的体 ...

  6. VS中多项目联合开发技巧

    1.  新建目录,将它设定为 本次project的工作目录,新建一个Code Files目录 2.  在Code Files目录里.新建一个Win32控制台程序(总控程序),再新建其他的项目比方项目A ...

  7. oc const 关键字 对指针的理解

    /* int const *p; *p是常量, p是变量 const int *p; *p是常量, p是变量 int * const p; *p是变量, p是常量 const int * const ...

  8. linux /proc/stat 文件说明

    /proc/stat 文件内容 # cat /proc/stat cpu 1411 1322 3070 1193539 2790 0 268 0 0 0 cpu0 472 658 787 297933 ...

  9. javax.xml.transform.TransformerConfigurationException: Could not compile stylesheet

    今天在调代码的时候遇到了一个异常: javax.xml.transform.TransformerConfigurationException: Could not compile styleshee ...

  10. ROADS - Roads

    N cities named with numbers 1 ... N are connected with one-way roads. Each road has two parameters a ...