模糊搜索高亮显示

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

肖ZE

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

阅读量539

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/lucky541788/article/details/103795726

版权

javascript 专栏收录该内容

89 篇文章 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>auto complete</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>
</body>
<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>

</html>

肖ZE

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
模糊搜索高亮显示

<!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-...
复制链接

扫一扫

专栏目录