模糊搜索高亮顯示

原創

2020-02-21 18:18

<!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>