!DOCTYPE html html lang=" en" head meta charset=" UTF-8" titleTitle /title style fieldset, img, input, button { border: none; padding: 0; margin: 0; outline-style: none; } ul, ol { list-style: none; margin: 0px; padding: 0px; } #box { width
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
fieldset, img, input, button {
border: none;
padding: 0;
margin: 0;
outline-style: none;
}
ul, ol {
list-style: none;
margin: 0px;
padding: 0px;
}
#box {
width: 405px;
margin: 200px auto;
position: relative;
}
#txtSearch {
float: left;
width: 300px;
height: 32px;
padding-left: 4px;
border: 1px solid #b6b6b6;
border-right: 0;
}
#btnSearch {
float: left;
width: 100px;
height: 34px;
font: 400 14px/34px "microsoft yahei";
color: white;
background: #3385ff;
cursor: pointer;
}
#btnSearch:hover {
background: #317ef3;
}
#pop {
width: 303px;
border: 1px solid #ccc;
padding: 0px;
position: absolute;
top: 34px;
}
#pop ul li {
padding-left: 5px;
}
#pop ul li:hover {
background-color: #CCC;
}
</style>
</head>
<body>
<div id="box">
<input type="text" id="txtSearch">
<input type="button" value="百度一下" id="btnSearch">
</div>
<script>
//模拟词库
var datas = ["a", "abc", "abbbb", "abxxxx", "xyz", "abcdef", "abzzzz"];
//步骤分析：
//1 当键盘按键抬起时触发效果(keyup)
//2 先根据当前输入内容，获取到可以显示的词
//2.1 能满足条件的词必须以当前输入的内容为开头（ 词库词.indexOf(输入内容) ）
//3 创建结构即可
//3.1 提前设置好的样式对结构的创建也有要求 ( div，id设置为pop，内部结构为ul和li )
//4 细节处理
//实现：
//1 获取元素
var box = document.getElementById("box");
var txt = document.getElementById("txtSearch");
//2 给txt设置keyup事件
txt.onkeyup = function () {
//3 根据当前输入内容，到词库中匹配到满足条件的词
var resultArr = [];//用于保存取出的词
for (var i = 0; i < datas.length; i++) {
if (datas[i].indexOf(this.value) == 0) {
//将词取出
resultArr.push(datas[i]);
}
}
//--------------
//对可能已经存在的pop结构进行删除
//如果页面中已经存在了旧的列表，这个标签一定具有id，叫pop
var pop = document.getElementById("pop");
//检测pop的值，如果为null，不需要删除，如果不是null，删除即可
if (pop) {
box.removeChild(pop);
}
//---------------
//如果当前没有输入内容，不进行新的结构创建
if (txt.value == "") {
return;
}
//如果没有匹配到词，不需要进行后续的结构创建
if (resultArr.length == 0) {
return;
}
//---------------
//4 根据取出的词创建结构(需要考虑样式问题)
var div = document.createElement("div");
div.id = "pop";
box.appendChild(div);
var list = document.createElement("ul");
div.appendChild(list);
//遍历取出的词，进行li的创建
var li;
for (var i = 0; i < resultArr.length; i++) {
li = document.createElement("li");
setText(li, resultArr[i]);
list.appendChild(li);
}
};
function setText(element, xinText) {
if (typeof element.innerText == "string") {
//说明支持innerText属性
element.innerText = xinText;
} else {
//说明支持textContent
element.textContent = xinText;
}
}
</script>
</body>
</html>
