原生js模拟百度淘宝搜索

最新推荐文章于 2022-06-25 21:48:24 发布

一只前端小白

最新推荐文章于 2022-06-25 21:48:24 发布

阅读量367

点赞数

分类专栏：日志文章标签： javascript

本文链接：https://blog.csdn.net/qq_38944959/article/details/86321332

版权

日志专栏收录该内容

51 篇文章 2 订阅

订阅专栏

由于没有后台数据，用数组模拟一下后台返回的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
                width:214px;
                /*height: 400px;*/
                margin: 100px auto;
                position: relative;
            }
        </style>
</head>
<body>
    <div class="box">
        <input type="text" id="txt">
        <input type="button" id="btn" value="搜索">
    </div>
    <script src="common.js"></script>
    <script>
        //模拟后台的数据
        var keyWords = [
            "一马当先",
            "一箭双雕",
            "一丝不苟",
            "一心二用",
            "吃火锅",
            "吃鸡肉",
            "吃鸡腿",
            "吃鸡蛋",
            "哈1哈",
            "嘻1嘻",
            "呜1呜",
        ];
        //给文本框注册键盘松开事件
        $query("#txt").onkeyup = function () {
            var txt = $query("#txt").value;
            if ($query(".box div")) {
                $query(".box").removeChild($query(".box div"));
            }
            if (txt.length == 0) {
                if ($query(".box div")) {
                    $query(".box").removeChild($query(".box div"));
                }
                return;
            }
            var newArr = [];
            for (var i = 0; i < keyWords.length; i++) {
                if (keyWords[i].indexOf(txt) !=-1) {
                    newArr.push(keyWords[i]);
                }
            }
            if (newArr.length > 0) {
                var newBox = document.createElement("div");
                newBox.style.border = "1px solid red";
                newBox.style.width = "100%";
                $query(".box").appendChild(newBox);
                for (var j = 0; j < newArr.length; j++) {
                    var newP = document.createElement("p");
                    newP.style.width = "100%";
                    newP.innerText = newArr[j];
                    newP.onmouseover = function () {
                        this.style.backgroundColor = "yellow";
                    }
                    newP.onmouseout = function () {
                        this.style.backgroundColor = "";
                    }
                    newBox.appendChild(newP);
                }
            }
            console.log(newArr);//打印匹配的数据
        }
    </script>
</body>
</html>

最后，附上效果图，确实丑了点?

在这里插入图片描述

一只前端小白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js模拟百度淘宝搜索

由于没有后台数据，用数组模拟一下后台返回的数据&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-sc
复制链接

扫一扫