注意事项：

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. Attempting to track I/O with systemtap

    https://glandium.org/blog/?p=1476 Attempting to track I/O with systemtap There are several ways a pr ...

  2. Android GIS开发系列-- 入门季（4） GraphicsLayer的点击查询要素

    上一讲中我们学会了如何在MapView中添加Graphic要素,那么在百度或高德地图中,当我们点击要素时,会显示出相应的详细信息.在GraphicsLayer中也提供了这样的方法.下面我们来学习在Gr ...

  3. .NET跨平台 - WCF & Mono

    让WCF运行在Linux上(寄宿于服务器程序) WCF介绍请自行 bing 搜索 使用的开发工具为vs2017,系统为 Ubuntu16.04 服务器软件为Jexus ( 详情请看:  Jexus官网 ...

  4. WebDev.WebServer40.EXE

    http://www.cnblogs.com/tong-tong/archive/2013/05/02/3049428.html 大学玩asp.net时就发现VS在Debug时会起一个web服务,这东 ...

  5. python基础学习之02 序列

    #encoding=utf-8 import math a=[1,23,4,5,6] print a a[1:1]=[2,3,5] print a a a[1]='a' print a a[1]={1 ...

  6. poj 1390 Blocks (记忆化搜索)

    Blocks Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 4318   Accepted: 1745 Descriptio ...

  7. C#之插入排序

    算法描述 1.假定数组第一位为有序序列,抽出后一位元素与有序序列中元素依次比较: 2.如果有序序列元素大于抽出元素,将该元素向后移位: 3.重复前面步骤依次抽取无序序列中首位元素进行比较,直到所有数值 ...

  8. 写给小白的JVM学习指南

    Java 虚拟机是学习 Java 的基础,也是迈入高级 Java 开发工程师的必备知识点.所以今天这篇文章我们来聊聊如何从零开始学习 Java 虚拟机. 基础 对于刚刚接触 JVM 的同学来说,JVM ...

  9. UVa563_Crimewave(网络流/最大流)(小白书图论专题)

    解题报告 思路: 要求抢劫银行的伙伴(想了N多名词来形容,强盗,贼匪,小偷,sad.都认为不合适)不在同一个路口相碰面,能够把点拆成两个点,一个入点.一个出点. 再设计源点s连向银行位置.再矩阵外围套 ...

  10. jQuery 插件开发全解析

    jQuery插件的开发包含两种: 一种是类级别的插件开发,即给jQuery加入新的全局函数,相当于给jQuery类本身加入方法.jQuery 的全局函数就是属于jQuery命名空间的函数,还有一种是对 ...