一篇文章教你学会实现模糊搜索结果的关键词高亮显示

最新推荐文章于 2024-06-21 14:20:11 发布

王同学要努力

最新推荐文章于 2024-06-21 14:20:11 发布

阅读量2.9k

点赞数 4

分类专栏：【每日五题】文章标签：前端 javascript html5 css3

本文链接：https://blog.csdn.net/m0_46374969/article/details/115018257

版权

【每日五题】专栏收录该内容

25 篇文章 114 订阅

订阅专栏

一篇文章教你学会实现模糊搜索结果的关键词高亮显示

话不多说，先看效果图：
在这里插入图片描述

代码如下：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        bdi {
            color: rgb(0, 136, 255);
        }
        
        li {
            list-style: none;
        }
    </style>
</head>

<body>
    <input class="inp" type="text">
    <section>
        <ul class="container"></ul>
    </section>
    <script>
        function debounce(fn, timeout = 300) {
            let t;
            return (...args) => {
                if (t) {
                    clearTimeout(t);
                }
                t = setTimeout(() => {
                    fn.apply(fn, args);
                }, timeout);
            }
        }

        function memorize(fn) {
            const cache = new Map();
            return (name) => {
                if (!name) {
                    container.innerHTML = '';
                    return;
                }
                if (cache.get(name)) {
                    container.innerHTML = cache.get(name);
                    return;
                }
                const res = fn.call(fn, name).join('');
                cache.set(name, res);
                container.innerHTML = res;
            }
        }

        function handleInput(value) {
            const reg = new RegExp(`\(${value}\)`);
            const search = data.reduce((res, cur) => {
                if (reg.test(cur)) {
                    const match = RegExp.$1;
                    res.push(`<li>${cur.replace(match, '<bdi>$&</bdi>')}</li>`);
                }
                return res;
            }, []);
            return search;
        }
        const data = ["上海野生动物园", "上饶野生动物园", "北京巷子", " 上海中心", "上海黄埔江", "迪士尼上海", "陆家嘴上海中心"]
        const container = document.querySelector('.container');
        const memorizeInput = memorize(handleInput);
        document.querySelector('.inp').addEventListener('input', debounce(e => {
            memorizeInput(e.target.value);
        }))
    </script>
</body>

</html>