JavaScriptDOM练习之百度搜索框

来源：互联网发布：大阪大型超市知乎编辑：程序博客网时间：2024/05/09 14:54
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        #box {            width: 450px;            margin: 200px auto;        }        #txt {            width: 350px;        }    </style></head><body><div id="box">    <input type="text" id="txt" value="">    <input type="button" value="搜索" id="btn"></div><script src="../common.js"></script><script>    var keyWords = ["小杨才是最纯洁的", "小杨才是最帅的", "小段是最猥琐的", "小超是最龌龊的", "传智播客是一个培训机构", "传说在传智有个很帅很纯洁的小杨", "苹果好吃", "苹果此次召回还是没有中国"];    addEventListener(my$("txt"), "keyup", function () {        //键盘弹起有div的话，删除再创建        if (my$("dv")) {            my$("box").removeChild(my$("dv"));        }        var div = document.createElement("div");        div.id = "dv";        div.style.width = "350px";        div.style.border = "1px solid red";        my$("box").appendChild(div);        //keyWOrds[i]的第一个字符等于text,把keyWord[i]加到新数组        var text = this.value;        var arr = [];        for (var i = 0; i < keyWords.length; i++) {            if (keyWords[i].indexOf(text) == 0) {                arr.push(keyWords[i]);            }        }        //创建p        for (var j = 0; j < arr.length; j++) {            var p = document.createElement("p");            p.innerText = arr[j];            div.appendChild(p);        }        //如果文本框是空的,临时数组是空的,不用创建div        if(text.length == 0 || arr.length == 0){            if(my$("dv")){                my$("box").removeChild(my$("dv"));            }        }    })</script></body></html>
阅读全文
0 0