<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>模拟搜素</title>
<link rel="stylesheet" href="">
<style type="text/css" media="screen">
*{
margin: 0;
padding: 0;
}
#box{
width: 500px;
margin: 300px auto;
}
.search{
float: left;
width: 360px;
height: 20px;
margin-right: 10px;
}
</style>
</head>
<body>
<div id="box">
<input class="search" id="text" type="text" name="" value="" placeholder="" />
<input type="button" name="" value="搜素" placeholder="">
</div>
</body>
<script type="text/javascript">
var keyWords = ["福建", "福州", "厦门", "泉州", "福清", "浙江", "上海", "上清"];
//获取键盘抬起事件
document.getElementById("text").onkeyup =function(){
if (document.getElementById("dv")) {
document.getElementById("box").removeChild(document.getElementById("dv"));
}
//获取输入框的内容
var text = this.value;
//创建临时数组 存放相应数据
var tempArry = [];
//输入框内容与数据比对
for (var i = 0; i <keyWords.length ; i++) {
if (keyWords[i].indexOf(text)==0) {
//判断输入的是在数组中位于第一个的
tempArry.push(keyWords[i]);
console.log("keyWords[i]:"+keyWords[i]);
}
}
//如果文本框内容为空，或者数据不匹配，不用创建div
if (this.value.length==0|| tempArry.length==0) {
//判断页面中有没有这个div 有的话， 就删除
if (document.getElementById("dv")) {
document.getElementById("box").removeChild(document.getElementById("dv"));
}
return;
}
//创建div
var dvObj = document.createElement("div");
//将div添加到box中
document.getElementById("box").appendChild(dvObj);
dvObj.id='dv';
dvObj.style.width = "350px";
dvObj.style.border = "1px solid #000";
//遍历临时数组，添加p标签显示
for (var j = 0; j < tempArry.length ; j++) {
var pObj = document.createElement("p");
//将p添加到dvObj中
dvObj.appendChild(pObj);
console.log("tempArry[j]:"+tempArry[j]);
pObj.innerText=tempArry[j];
}
}
</script>
</html>
407
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
