原生JS模拟百度搜索框关键字推荐

最新推荐文章于 2024-07-29 07:45:00 发布

筝非

最新推荐文章于 2024-07-29 07:45:00 发布

阅读量714

点赞数 1

分类专栏：漫漫前端路文章标签： JavaScript 原生JS

本文链接：https://blog.csdn.net/Xue_zenghui/article/details/83964410

版权

漫漫前端路专栏收录该内容

45 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box {
            width: 450px;
            margin: 200px auto;
        }

        #txt {
            width: 350px;
        }

        #pop {
            width: 350px;
            border: 1px solid red;
        }

        #pop ul {
            margin: 10px;
            padding: 0px;
            width: 200px;
            list-style-type: none;

        }

        #pop ul li {

        }
    </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 = ["我是真滴帅啊", "我是真滴牛批啊啊啊", "中国共产党万岁啊啊啊", "我咋能这么优秀嘞？？",
        "中国国民党就不行嘿嘿嘿", "苹果好吃吗", "我滴个龟龟耶", "苹果手机很好用！"];
    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[i].indexOf(text) == 0) {
                tempArr.push(keyWords[i]);
            }
        }
        //如果文本框为空或者数组五元素，则删除所有div
        if (this.value.length == 0 || tempArr.length == 0) {
            if (my$("dv")) {
                my$("box").removeChild(my$("dv"));
            }//end if
            return;
        }// end if

        //遍历临时数组，创建div
        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 red";

        //循环遍历临时数组，在创建的div中添加p标签
        for (var i = 0; i < tempArr.length; i++) {
            var pObj = document.createElement("p");
            dvObj.appendChild(pObj);
            setInnerText(pObj, tempArr[i]);
            pObj.style.fontSize = "14px";
            pObj.style.margin = "0";
            pObj.style.padding = "0";
            pObj.style.cursor = "pointer";
            pObj.style.marginTop = "5px";
            pObj.style.marginLeft = "5px";
            pObj.onmouseover = function () {
                this.style.backgroundColor = "pink";
            };
            pObj.onmouseout = function () {
                this.style.backgroundColor = "";
            };
        }
    }
</script>
</body>
</html>

外部引入工具JS文件：

/*
* 根据id属性的值，返回对应的标签元素
* */
function my$(id) {
    return document.getElementById(id);
};

// 设置任意标签中的文本内容
function setInnerText(element, text) {
    // 判断浏览器是否支持这个属性
    if (typeof element.textContent == "undefined") {//不支持
        element.innerText = text;
    } else {//支持
        element.textContent = text;
    }
};

// 获取任意标签中的文本内容
function getInnerText(element) {
    if (typeof element.textContent == "undefined") {
        return element.innerText;
    } else {
        return element.textContent;
    }
};

//获取任意一个父级元素的第一个子级元素
function getFirstElementChild(element) {
    if (element.firstElementChild) {//IE8支持
        return element.firstElementChild;
    } else {//IE8不支持
        var node = element.firstChild;
        while (node && node.nodeType != 1) {//不是标签
            node = node.nextSibling;
        }
        return node;
    }
}

//获取任意一个父级元素的最后一个子级元素
function getLastElementChild(element) {
    if (element.lastElementChild) {
        return element.lastElementChild;
    } else {
        var node = element.lastChild;
        while (node && node.nodeType != 1) {
            node.previousSibling;
        }
        return node;
    }
}

//为任意元素绑定任意的事件。（元素，事件类型，处理函数）
function addEventListener(element, type, fn) {
    //判断浏览器是否支持这个方法
    if (element.addEventListener) {
        element.addEventListener(type, fn, false)
    } else if (element.attachEvent) {
        element.attachEvent("on" + type, fn)
    } else {
        element["on" + type] = fn;
    }
}

//为任意元素解绑事件
function removeEventListener(element, type, fnName) {
    if (element.removeEventListener) {
        element.removeEventListener(type, fnName, false);
    } else if (element.detachEvent) {
        element.detachEvent("on" + type, fnName);
    } else {
        element["on" + type] = null;
    }
}