Javascript——模拟百度搜索框

<div id="box">
    <input type="text" id="txt" value="">
    <input type="button" value="搜索" id="btn">
</div>
<script src="common.js"></script>
<script>
    var keyWords=["行天宫后二楼前座那个小房间","日夜排练我们听着唱片","唱片来自那唱片行叫摇滚万岁","和驻唱小店都在士林边缘","行天宫后二楼前座那个小房间","日夜排练我们听着唱片","唱片来自那唱片行叫摇滚万岁","和驻唱小店都在士林边缘"];
    //获取文本框注册键盘抬起事件
    my$("txt").onkeyup=function(){
        //每一次键盘抬起都判断页面中有没有这个div
        if(my$("dv")){
            //删除一次
            my$("box").removeChild(my$("dv"));
        }
        //获取文本框输入的内容
        var text=this.value;
        //临时数组——空数组——存放对应上的数据
        var tempArr=[];
        //把文本框输入的内容和数组中的每个数据对比
        for(var i=0;i<keyWords.length;i++){
            //是否是最开始出现的
            if(keyWords[i].indexOf(text)==0){
                tempArr.push(keyWords[i]);//追加
            }
        }
        //如果文本框是空的，临时数组是空的，不用创建div
        if(this.value.length==0 || tempArr.length==0){
            //如果页面中有这个div，删除这个div
            if(my$("dv")){
                my$("box").removeChild(my$("dv"));
            }
            return;
        }
        //遍历临时数组，创建div，把div加入id为box的div中
        var dvObj=document.createElement("div");
        my$("box").appendChild(dvObj);
        dvObj.id="dv";
        dvObj.style.width="250px";
        dvObj.style.border="1px solid green";
        //循环遍历临时数组，创建对应的p标签
        for(var i=0;i<tempArr.length;i++){
            //创建p标签
            var pObj=document.createElement("p");
            //把p加入到div中
            dvObj.appendChild(pObj);
            setInnerText(pObj,tempArr[i]);
            pObj.style.margin=0;
            pObj.style.padding=0;
            pObj.style.cursor="pointer";
            pObj.style.marginTop="5px";
            pObj.style.marginLeft="5px";
            //鼠标进入
            pObj.onmouseover=function(){
                this.style.backgroundColor="yellow";
            }
            pObj.onmouseout=function(){
                this.style.backgroundColor="";
            }
        }
    }
</script>