
搜索高亮显示
发布日期:2021-05-13 21:12:21
浏览次数:20
分类:精选文章
本文共 1100 字,大约阅读时间需要 3 分钟。
在本题中,我们需要实现一个搜索功能的高亮显示效果。具体来说,目标是在搜索框中输入某个字符后,可以看到搜索结果中的相关项被高亮标记。首先,我们从搜索结果中提取出内容并进行切割,得到一个个字的单元。接着,我们需要在搜索框中输入字符,这时我们要检查搜索结果中的每个相应字是否与输入的字符相符。如果相符,我们就可以设置对应的标记符为真值(true)。最终,我们希望这个功能能够在用户在搜索框输入字符后自动进行上述检查,找到对应项并进行标记。这可以通过监听页面输入和关注事件来实现。以下是实现该功能的具体代码:```wxss.blue { color: #25AFF6 !important; font-weight: bold;}
// 切割字符串为单个字let list = res.result;let name = [];for (let [index, s] of list.entries()) { let aa = []; name = s.name.split(''); for (let [index, n] of name.entries()) { aa.push({ name: n, flag: false }); s.aa = aa; }}// 检查是否存在匹配项let listr = that.data.searchList;for (let i of listr) { for (let s of i.aa) { if (str.indexOf(s.name) !== -1) { s.flag = true; console.log(listr); that.setData({ searchList: listr }); } else { s.flag = false; that.setData({ searchList: listr }); } }}
通过上述代码,我们可以实现一个自动检测搜索结果中是否存在输入字符并进行标记的功能。这种方法可以在用户输入字符后,自动带动相关项进行标记,提升用户体验。
发表评论
最新留言
网站不错 人气很旺了 加油
[***.192.178.218]2025年04月26日 15时46分14秒
关于作者

喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
C++ Primer Plus读书笔记:c++字符串
2019-03-12
CSU 1757: 火车入站(区间覆盖的最大覆盖深度)
2019-03-12
C++ Primer Plus读书笔记:循环读取(错误处理)
2019-03-12
skimage与cv2 安装失败的解决办法
2019-03-12
linuxmint 上面装谷歌浏览器
2019-03-12
windows/linux下Anaconda管理的(安装的)包的位置
2019-03-12
关于吴恩达的深度学习的一些授课视频里面英文翻译错误的实例展示
2019-03-12
伴随矩阵和逆矩阵的关系证明
2019-03-12
反向传播之矩阵求导dL/dz1的求导过程 普通神经网络的逆向求导过程
2019-03-12
numpy.linspace使用详解
2019-03-12
突破Bias-Variance困境
2019-03-12
函数可导和可微的区别: 一元中互为充要;多元中可微是可导的必要条件,可导不一定可微。
2019-03-12
一文说尽C++赋值运算符重载函数(operator=)
2019-03-12
Form窗体属性
2019-03-12
IC封装图片大全
2019-03-12
自恢复保险丝的选用
2019-03-12
开关电源 误差放大器电路
2019-03-12
Altium Designer唤出关掉的窗口
2019-03-12