第 90 题：实现模糊搜索结果的关键词高亮显示 #52

DreamLee1997 · 2019-10-17T04:05:34Z

如图：

代码：

<!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 = null;
        return (...args) =>{
            if(t){
                clearTimeout(t)
            }
            t = setTimeout(() =>{
                fn.apply(fn, args);
            },timeout)
        }
    }

    function memorize(fn) {
        let  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) {
        let reg = new RegExp(`\(${value}\)`);
        let 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>

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

第 90 题：实现模糊搜索结果的关键词高亮显示 #52

第 90 题：实现模糊搜索结果的关键词高亮显示 #52

DreamLee1997 commented Oct 17, 2019

第 90 题：实现模糊搜索结果的关键词高亮显示 #52

第 90 题：实现模糊搜索结果的关键词高亮显示 #52

Comments

DreamLee1997 commented Oct 17, 2019