实现搜索框功能（将搜索关键字标红，点击就加入到文本框中）

最新推荐文章于 2021-12-10 19:35:02 发布

Wrj6811

最新推荐文章于 2021-12-10 19:35:02 发布

阅读量4.4k

点赞数 2

分类专栏：前端小功能 js 文章标签：百度搜索框关键字标红

本文链接：https://blog.csdn.net/Wrj6811/article/details/102931421

版权

前端小功能同时被 2 个专栏收录

22 篇文章 1 订阅

订阅专栏

21 篇文章 0 订阅

订阅专栏

类似于百度的搜索框，当输入一个字或词的时候，自动检索有没有该内容，有的话把输入的关键字标红

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>百度搜索框设置</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .header {
            width: 500px;
            margin: 50px auto;
        }
        
        #search {
            width: 250px;
            height: 36px;
        }
        
        #btn {
            height: 40px;
            width: 75px;
            margin-left: -5px;
        }
    </style>
</head>

<body>
    <div class="header" id="header">
        <input type="text" value="" placeholder="输入内容" id="search">
        <input type="button" value="搜索" id="btn">
    </div>
</body>
<script src="../js/common.js"></script>
<script>
    // var keywords=["路遥知马力日久见人心","年轻正好","百年孤独","钢铁是怎么炼成的","海底两万里","资治通鉴"];
    var arr = "潘石屹 | 王 石 | 蒋锡培 | 向文波 | 牛根生 | 熊晓鸽 | 王冉 | 于清教 | 谢清海 | 刘旗辉 |刘步尘 | 陈达夫 | 船长 | 叶茂中 |  李士福 | 王进生 | 任志强 | 付伟 | 孙虹钢 |  宋新宇  |   王 微  | 翁向东 | 周济谱 | 袁岳 | 成君忆 | 艾学蛟 | 雷永军 | 刘秋华 | 宋炜 | 刘东华 |科特勒 | 陈志列 | 张巨峰 | 姚日来 | 李朝曙 | 刘兴亮 | 沧海 | 曾玉 | 姜汝祥 | 徐浩然 | 邓国坚|辜胜阻 | 范以锦 | 郭梓林 | 秦合舫 | 王育琨 | 王辉耀 | 胡奎 | 华仔 | 韩耀国 | 唐清建 |曲向东 | 李志起 | 吴伯凡 | 景素奇 | 贾昌荣 | 林国峰 | 沈坤 | 刘贤方 | 周永亮 | 马向阳 | 辜胜阻 | 范以锦 | 郭梓林 | 秦合舫 | 王育琨 | 王辉耀 | 胡奎 | 华仔 | 韩耀国 | 唐清建 |曲向东 | 李志起 | 吴伯凡 | 景素奇 | 贾昌荣 | 林国峰 | 沈坤 | 刘贤方 | 周永亮 | 马向阳 |熊焰 | 唐崇健 | 王广伟 | 孔繁任 | 刘孝全 | 徐浩然 | 沈青 ";
    // var arrName=arr.split("|");
    var keywords = arr.split("|");
    myId("search").onkeyup = function() {
        //每次键盘抬起，检测是否有  div  ，有就删除
        if (myId("dv")) {
            myId("header").removeChild(myId("dv"));
        }
        var text = this.value; //获取文本框中输入的内容
        var tempArr = []; //临时数组，存放对应数组上的数据
        for (var i = 0; i < keywords.length; i++) {
            if (keywords[i].indexOf(text) != -1) { //如果数组中有输入的字
                tempArr.push(keywords[i]);
            }
        }
        if (this.value.length == 0 || tempArr.length == 0) { //检测文本框中是否有内容
            if (myId("dv")) { //文本框没有内容的话，如果有div，则删除
                myId("header").removeChild(myId("dv"));
            }
            return;
        }
        var dvObj = document.createElement("div"); //创建div
        myId("header").appendChild(dvObj);
        dvObj.id = "dv";
        dvObj.style.width = "252px";
        // dvObj.style.height="100px";
        dvObj.style.border = "1px solid green";
        for (var i = 0; i < tempArr.length; i++) {
            var pObj = document.createElement("p"); //div 中添加p
            dvObj.appendChild(pObj);
            pObj.innerText = tempArr[i];
            pObj.style.cursor = "pointer";
            pObj.style.marginTop = "3px";
            pObj.style.marginLeft = "3px";
            // var array = pObj.innerHTML.split("");    //将一段字符串分割成单个字的数组
            // pObj.innerHTML.replace(/(年)/igm,"<span style='color: red;'>$&</span>");
            var reg = new RegExp("(" + text + ")", "g"); //正则表达式
            var newstr = pObj.innerHTML.replace(reg, "<span style='color: red;'>$1</span>"); //让内容中与输入的内容相同的部分显示为红色
            // document.write(newstr + "<br />");
            pObj.innerHTML = newstr;
            pObj.onmouseover = function() {
                this.style.backgroundColor = "yellow";
            }
            pObj.onmouseout = function() {
                this.style.backgroundColor = "";
            }
            pObj.onclick = function() {
                myId("search").value = this.innerText
                myId('header').removeChild(dvObj)
                    // console.log(this.innerText)
            }
        }
    }
</script>

</html>

效果图如下方所示

common.js里面封装代码：

function myId(id) {

return document.getElementById(id);

}

将搜索的关键词标红的代码为：

 var reg = new RegExp("(" + text + ")", "g"); //正则表达式
 var newstr = pObj.innerHTML.replace(reg, "<span style='color: red;'>$1</span>"); //让内容中与输入的内容相同的部分显示为红色

其中$1为输入的那个关键字

Wrj6811

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
实现搜索框功能（将搜索关键字标红，点击就加入到文本框中）

类似于百度的搜索框，当输入一个字或词的时候，自动检索有没有该内容，有的话把输入的关键字标红代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>百度搜索框设置</title> <style&...
复制链接

扫一扫

专栏目录