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

话不多说，先看效果图：

代码如下：

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

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

一篇文章教你学会使用SpringBatch 监听器Listener
文章目录一.SpringBatch监听器二.搭建SpringBatch开发环境三.监听器详细介绍 1.JobExecutionListener 2.StepExecutionListener 3 ...
一篇文章教你学会使用SpringBoot实现文件上传和下载
文章目录一.搭建SpringBoot开发环境 1.创建项目 2.配置application.properties参数 3.实体响应类和异常信息类 4.创建FileController 二.接口测试 ...
一篇文章教你学会如何使用CSS中的雪碧图（CSS Sprite）
一篇文章教你学会如何使用CSS中的雪碧图(CSS Sprite) 一.什么是雪碧图? 雪碧图(CSS Sprite)又叫CSS精灵图,是一种网页图片应用处理方式,他允许你将一个页面设计到所有零星图片 ...
html网页怎么向文章,一篇文章教你学会HTML
html是学习做网页的基础,漂亮的网页与布局就是由有些html代码组成,大家看完这篇文章就可以简单的了解html了,多写多练. 如果你不致力于成为美工的话,那么作为开发人员,可以读懂HTML.必要时能 ...
一篇文章教你学会Java泛型
文章目录一.原生态类型 1.什么是原生态类型 2.使用原生态类型有什么不好 3.泛型的子类型规则 4.泛型的可擦除性二.泛型常用形式 1.泛型方法 2.泛型单例工厂三.有限制的通配符类型四. ...
英文连写字体怎么练_一篇文章教孩子学会衡水英文字体，建议收藏！
"衡水体"实质上是衡水中学学生书写的手写印刷体, 随着中考高考电子阅卷的普及,采用简洁.工整.快速的字体进行书写成为必需,极大地迎合了阅卷老师心理和电脑显示特点.一定程度上有助于大 ...
keyshot渲染图文教程_一篇文章教你学会3D建模和渲染反正我是信了
平常大家需要学习3D设计,基本上都是通过网上教程,这些教程多以视频为主,因为3D的可操作性非常强,只有在动态的视频上才能完整展示并教学. 但是也有这样或那样的原因,很多小伙伴并不能通过视频学习,那有没 ...
一篇文章教你学会Java基础I/O流
文章目录一.初始IO流 1.什么是流 2.IO流的分类二.字节输入输出流 1.字节输入流(InputStream) 2.字节输出流(OutputStream) 3.文件拷贝三.处理流和转换流写 ...
一篇文章教你学会Java基础JDBC
文章目录一.搭建JDBC开发环境 1.搭建工程 2.连接数据库工具类JdbcConnectionUtil 3.main方法测试二.创建Statement或PreparedStatement接口,执 ...

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

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

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

最新文章

热门文章