注意事项：
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——模拟百度搜索
原文地址：http://www.cnblogs.com/wuqiuxue/p/7894252.html