搜索高亮显示
发布日期: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
});
}
}
}

通过上述代码,我们可以实现一个自动检测搜索结果中是否存在输入字符并进行标记的功能。这种方法可以在用户输入字符后,自动带动相关项进行标记,提升用户体验。

上一篇:element 嵌套验证
下一篇:小程序weui图片上传

发表评论

最新留言

网站不错 人气很旺了 加油
[***.192.178.218]2025年04月26日 15时46分14秒