模拟百度搜索
<body>
<div id="box">
<input type="text" id="txt" class="txt"/>
<input type="button" value="搜索" />
<script>
function my$(id){
return document.getElementById(id);
}
//模拟百度搜索
//创建一个字符数组 模拟关键字 创建一个空数组用来存放新的关键字
var keyArr=["小明舒服舒服","小红随时随地","小怪到底是","大名花花","大红电放费","大字丰富的凤飞飞"];
//键盘抬起事件
my$("txt").onkeyup=function(){
//每次键盘抬起都判断一下页面红有没有这个div 必须加不然有bug
if(my$("dv")){
my$("box").removeChild(my$("dv"));
}
var txt=my$("txt").value;
var tempArr=[];
for(var i=0;i<keyArr.length;i++){
if(keyArr[i].indexOf(txt)==0){
tempArr.push(keyArr[i]);
}
}
//判断什么时候创建div 当文本框为空或者临时数组为空
if(this.value.length==0||tempArr.length==0){
//当有dv时
if(my$("dv")){
my$("box").removeChild(my$("dv"));
}
return;
}
var dvObj=document.createElement("div");
my$("box").appendChild(dvObj);
dvObj.id="dv";
dvObj.style.width="175px";
dvObj.style.border="1px solid green";
//遍历创建p
for(var i=0;i<tempArr.length;i++){
var pObj=document.createElement("p");
my$("dv").appendChild(pObj);
setInnerText(pObj,tempArr[i]);
pObj.style.cursor="pointer";
pObj.onmouseover=f1;
pObj.onmouseout=f2;
}
}
//优化
function f1(){
this.style.backgroundColor="yellow";
}
function f2(){
this.style.backgroundColor="";
}
</script>
</div>
</body>
<script>//兼容代码
function addEventListener(ele,type,fn){
if(ele.addEventListener){
ele.addEventListener(type,fn,false);
}else if(ele.attachEvent){
ele.attachEvent("on"+type,fn);
}else{
ele["on"+type]=fn;
}
}
function setInnerText(ele,text){
if(typeof ele.textContent=="undefined"){
ele.innerText=text;
}else{
ele.textContent=text;
}
}
function getInnerText(ele){
if(typeof ele.textContent=="undefined"){
return ele.innerText;
}else{
return ele.textContent;
}
}
</script>
978
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
