JS案例16-模拟搜索引擎候选框
2018-10-23 本文已影响0人
hi__world
少废话，直接上图。
模拟搜索引擎
源码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 500px;
margin: 200px auto;
}
ul {
width: 392px;
padding: 5px;
list-style: none;
border: 1px solid red;
}
li:hover {
background-color: red;
}
input {
width: 400px;
}
button {
width: 70px;
}
</style>
</head>
<body>
<div class="box">
<input type="text"/>
<button>搜索</button>
</div>
<script>
//需求：输入内容(输入事件，键盘弹起事件)，模拟服务器获取内容，创建ul，并在其中显示。
//步骤：
//1.获取事件源 //2.绑定事件 //3.书写事件驱动程序
//1.获取事件源
//模拟服务器获取内容
var arr = ["a","ab","abc","abcd","aa","aaa"];
var box = document.getElementsByTagName("div")[0];
var inp = box.children[0];
// var inp = document.getElementsByTagName("input")[0];
//2.绑定事件(输入内容(输入事件，键盘弹起事件))
inp.onkeyup = function () {
//创建一个字符串，里面添加满了li和对应的内容。
var newArr = [];
//我要从数组中查询以input中输入内容为开头的信息，然后添加到li中，转换成字符串。
//遍历老数组，然后判断每一项，哪项是以input内容为开头的穿件一个li，塞进去。
for(var i=0;i<arr.length;i++){
//判断当前项，是否已input内容为开头
//获取输入内容input标签的value属性值。
var val = this.value;
if(arr[i].indexOf(val)===0){
newArr.push("<li>"+arr[i]+"</li>");
}
}
var str = newArr.join("");
//Bug1.每次创建新的ul之前，先删除旧的ul
//只有ul存在我们才能删除ul
// var aaa = box.getElementsByTagName("ul")[0];
if(box.children[2]){
//只要存在，那么就是object，object类型的数据，只要不是null,对应的boolean值都是true；
box.removeChild(box.children[2]);
}
//Bug2.如果input中内容为空，那么久不能在生成ul了。
//如果input为空，那么切断函数
//Bug3.如果arr数组中没有以input为开头的元素。那么切断函数
//newArr的长度为0，就能证明以input内容为开头的元素，在arr中不存在
if(this.value.length === 0 || newArr.length === 0){
//切断函数(不在产生新的ul)
return;
}
//3.书写事件驱动程序
var ul = document.createElement("ul");
//把创建好的内容添加到ul中。
ul.innerHTML = str;
box.appendChild(ul);
}
</script>
</body>
</html>
