百度搜索小案例
2019-06-08 本文已影响0人
小透明进击战
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
#dv {
width: 450px;
margin: 200px auto;
}
#content {
width: 300px;
}
</style>
</head>
<body>
<div id="dv">
<input type="text" id="content"/>
<input type="button" value="搜索" id="search"/>
</div>
<script src="../common.js"></script>
<script>
var text=["1", "11","2","22", "232", "321", "1121", "22", "151"]
my$("content").onkeyup=function(){
//坑的解决方案就是：每次键盘抬起，第一步先检查是否存在newdiv的盒子，如果存在，就删除。
if(my$("newdiv")){
my$("dv").removeChild(my$("newdiv"));
}
//获取输入框文本值
var txt=this.value;
//将对比符合的值放入这个临时数组
var newarray=[];
for(var i=0;i<text.length;i++){
if(text[i].indexOf(txt)==0){
newarray.push(text[i]);
}
}
//创建div 但是要注意不要每次执行都创建div。要先删后创,但是要注意如果空的就不需要执行创建div的操作，也就是要return。
//如果临时数组和txt值都为0,则不需要创建，也就是要删除
if(newarray.length==0||txt.length==0){
//页面中有div要删除。
if(my$("newdiv")){
my$("dv").removeChild(my$("newdiv"));
}
return;
}
//创建div
var divele=document.createElement("div");
my$("dv").appendChild(divele);
divele.style.width="350px";
divele.style.border="1px dashed hotpink";
divele.id="newdiv";
//循环创建p标签
for(var i=0;i<newarray.length;i++){
var pele=document.createElement("p");
divele.appendChild(pele);
setInnerText(pele,newarray[i]);
pele.style.margin="0";
pele.style.padding="0";
pele.style.marginLeft="5px";
pele.style.marginTop="5px";
pele.onmouseover=function(){
this.style.backgroundColor="hotpink";
}
pele.onmouseout=function(){
this.style.backgroundColor="";
}
}
}
</script>
</body>
</html>
注意：
1、第一个坑就是要先检查临时数组和输入框是否有字节再创建div。其中如果没有字节，就不需要执行下面创建div的语句，也就是if语句中要使用return，结束键盘抬起事件处理函数的往下执行。
2、第二个坑就是如果有多次键盘抬起就会创建多次div。所以，我们每次执行键盘抬起事件时要首先检查是否存在div，如果存在就要删除。
第二个坑.jpg
3、上述所说的div是指新创建的div。newdiv。
