注意事项:

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. 互斥的数(codevs 1553)

    题目描述 Description 有这样的一个集合,集合中的元素个数由给定的N决定,集合的元素为N个不同的正整数,一旦集合中的两个数x,y满足y = P*x,那么就认为x,y这两个数是互斥的,现在想知 ...

  2. 阿里maven仓库配置

    修改conf文件夹下的settings.xml文件,添加如下镜像配置: <mirrors> <mirror> <id>alimaven</id> < ...

  3. T1683 车厢重组 codevs

    http://codevs.cn/problem/1683/  时间限制: 1 s  空间限制: 1000 KB  题目等级 : 白银 Silver 题目描述 Description 在一个旧式的火车 ...

  4. cogs——1578. 次小生成树初级练习题

    1578. 次小生成树初级练习题 ☆   输入文件:mst2.in   输出文件:mst2.out   简单对比时间限制:1 s   内存限制:256 MB [题目描述] 求严格次小生成树 [输入格式 ...

  5. sql-server-internals-architecture

    http://kevinekline.com/slides/sql-server-internals-architecture/

  6. Jenkins+Github持续集成

    由于最近团队代码库从coding迁移到github,在CI工具的选型上尝试了travis-ci和circle-ci,最后决定自己搭建CI服务器,而我也有幸认领了这个任务的调研,因此有了这篇文章. 之前 ...

  7. 【转】gcov lcov 覆盖c/c++项目入门

    原文: http://www.cnblogs.com/turtle-fly/archive/2013/01/09/2851474.html ------------------------------ ...

  8. Xcode9自带版本控制系统(Git)的使用

    情形一:新项目工程 前提是首先你得有个Github账号. 1.创建新工程,选中使用git,创建本地仓库. 2.在偏好设置添加git账号. 3.创建Github远程仓库,xcode会自动帮你在Githu ...

  9. Centos 7 Apache编译安装

    1.安装apache ./configure --prefix=/usr/local/apache2 --enable-rewrite --enable-so --enable-headers --e ...

  10. MapReduce04

    ===================== MapReduce内部机制:本地性 ===================== 什么是数据本地性(data locality)--------------- ...