模拟搜索框（为何会出现两组相同的搜索列表）

（）  //css代码

  *{
        padding: 0;
        margin: 0;
    }
    #box {
        width: 450px;
        margin: 200px auto;
    }

    #txt {
        width: 350px;
    }

//html代码<div id="box"><input type="text" id="txt" value="" /> <input type="button" value="搜索" id="btn" /> </div>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.indexOf(text) == 0) {
                tempArr.push(keyWords);//追加
            }
        }

        //坑========
        //如果文本框是空的，不用创建div


        //如果文本框是空的，临时数组是空的，不用创建div
        if (this.value.length == 0 || tempArr.length == 0) {
            // 如果页面中有这个div，删除这个div
            // console.log(this.value.length);
            // console.log(tempArr.length, my$("dv"));
            if (my$("dv")) {
                my$("box").removeChild(my$("dv"));
            }
            return;
        }

        //    遍历临时数组，创建div,把div加入到id为box的div中
       //这里就是我解决有两组搜索列表的地方
        if (!my$("dv")) {
            var dvObj = document.createElement("div");
            my$("box").appendChild(dvObj);
            dvObj.id = "dv";
            dvObj.style.width = "350px";
            // dvObj.style.height = "100px";
            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);
                pObj.style.curser = "pointer";
                pObj.style.margin = 0;
                pObj.style.padding = 0;
                pObj.style.marginTop = "5px";
                pObj.style.marginLeft = "5px";

                //鼠标进入
                pObj.onmouseover = onmouseoverEvent;

                //鼠标离开
                pObj.onmouseout = onmouseoutEvent;
            }
        }


    };

    // 鼠标进入事件
    function onmouseoverEvent() {
        this.style.backgroundColor = "yellow";
    };

    //鼠标离开事件
    function onmouseoutEvent() {
        this.style.backgroundColor = "";
    };


出现的问题是
在我没有加（!my$("dv")）去判断是否创建了下拉搜索列表的时候，它会在我搜索第一个子“小”的时候，触发键盘抬起的事件，但是会触发两次。
这个问题我没找到原因，
但是我加了一个（!my$("dv")）再去判断是否还有id为dv的div标签成功解决问问题。

666