注意事项：

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. 20170613NOIP模拟赛

    共3道题目,时间3小时 题目非原创,仅限校内交流使用 题目名称 Graph Incr Permutation 文件名 graph incr permutation 输入文件 graph.in incr ...

  2. JVM内存分布和垃圾回收

    内存区域划分   程序计数器(Program counter Register) 描述  程序计数器(Program Counter Register)是一块较小的内存空间.它可以看作是当前线程执行的 ...

  3. WPS for Linux字体配置（Ubuntu 16.04）

    错误提示: 解决方法: 从http://bbs.wps.cn/thread-22355435-1-1.html下载字体库,离线版本:(链接: https://pan.baidu.com/s/1i5dz ...

  4. react实现ssr服务器端渲染总结和案例(实例)

    1.什么是 SSR SSR 是 server side render 的缩写,从字面上就可以理解 在服务器端渲染,那渲染什么呢,很显然渲染现在框架中的前后端分离所创建的虚拟 DOM 2.为什么要实现服 ...

  5. poj 3090 &amp;&amp; poj 2478（法雷级数，欧拉函数）

    http://poj.org/problem?id=3090 法雷级数 法雷级数的递推公式非常easy:f[1] = 2; f[i] = f[i-1]+phi[i]. 该题是法雷级数的变形吧,答案是2 ...

  6. [vs执行报错] CRT detected that the application wrote to memory after end of heap buffer

    CRT 是c/c++ run-time lib , 是程序执行时所需的核心库. 这个错误是由于以对内在操作的过程中.所写的地址超出了.所分配内在的边界 有个建议是: 1.内存申请多少释放多少,释放掉你 ...

  7. Oracle执行存储过程报错——ora-01031:权限不足

    执行DDL报错 在oracle存储过程中,默认是可以直接执行DML和DQL的,但是执行CREATE这种的DDL则需要借助EXECUTE IMMEDIATE 如: create or replace p ...

  8. new Modifier (C# Reference)

    https://msdn.microsoft.com/en-us/library/435f1dw2.aspx When used as a declaration modifier, the new  ...

  9. openstack instance resize to

    Icehouse resize No valid host was found Hi all!! We're currently experimenting an error that's it's ...

  10. 基于spark和flink的电商数据分析项目

    目录 业务需求 业务数据源 用户访问Session分析 Session聚合统计 Session分层抽样 Top10热门品类 Top10活跃Session 页面单跳转化率分析 各区域热门商品统计分析 广 ...