注意事项：
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>