js实现模拟百度搜索

快来打我* 2021-12-17 11:33 388阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body{
         
                padding-top: 100px;
                text-align: center;
            }
            #dv p{
         
                margin: 0;
                padding: 0;
                cursor: pointer;
                padding: 5px 0;
            }
        </style>
    </head>
    <body>
    <input type="text" id="txt">
    <button>百度一下</button>
    <div id="box"></div>
    <script src="common.js"></script>
    <script>
        //1.准备数据
        var keyWords = ["吃火锅", "吃鱼", "吃卫龙", "吃火腿", "吃火鸡面", "吃火龙果", "喝烫水","喝水"];
        //2.给文本框注册键盘抬起事件
        my$('txt').onkeyup = function () {
            //优化: 每次键盘抬起判断页面中有没有这个div
            if(my$("dv")){
                my$("box").removeChild(my$("dv"));
            }
            //console.log(this.value);
            var text = this.value;//获取文本框的值
            //存放能对应上的数据
            var arr = [];
            for(var i = 0 ; i < keyWords.length ; i++){
                //判断值是不是当前数据中最开始出现的
                if(keyWords[i].indexOf(text) == 0){
                    //console.log(text+"=============="+keyWords[i].indexOf(text));
                    arr.push(keyWords[i]);
                }
            }
            console.log(arr);
            //优化: 如果文本框是空的, 临时的数组也是空的, 不需要创建div
            if(text.length == 0 || arr.length == 0){
                //需要判断是否存在, 不然会报错
                if (my$("dv")) {
                    my$("box").removeChild(my$("dv"));
                }
                return false;
            }
            //3.把对应的数据显示到页面
            var box = document.createElement("div");
            my$("box").appendChild(box);
            box.id = "dv";
            box.style.border = "1px solid green";
            // box.style.height = "50px";
            //遍历添加
            for(var i = 0 ; i < arr.length; i++){
               var pObj =  document.createElement("p");
                box.appendChild(pObj);
                //设置内容
                pObj.innerHTML = arr[i];
                //鼠标进入
                pObj.onmouseover = function () {
                    this.style.backgroundColor = "pink";
                }
                //鼠标移出
                pObj.onmouseout = function () {
                    this.style.backgroundColor = "";
                }
                //鼠标点击
                pObj.onclick = function () {
                    my$("txt").value = this.innerText;
                    my$("box").removeChild(my$("dv"));
                }
            }
        }
    
    
    </script>
    </body>
    </html>

转载于:https://www.cnblogs.com/Ironman725/p/10964240.html