JavaScriptDOM练习之百度搜索框

最新推荐文章于 2023-05-10 23:29:57 发布

星空nwk

最新推荐文章于 2023-05-10 23:29:57 发布

阅读量326

点赞数

文章标签： JavaScriptDOM练习之百度搜索

本文链接：https://blog.csdn.net/weixin_40243411/article/details/78171968

版权

<!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>

星空nwk

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScriptDOM练习之百度搜索框

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> style> #box { width: 450px; margin: 200px auto; } #txt { wi
复制链接

扫一扫