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