一篇文章教你学会实现模糊搜索结果的关键词高亮显示
话不多说，先看效果图：
代码如下：
<!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>
