帮你打开活字格更神奇的功能：一百零五，高亮显示搜索关键字

Meng2499

本帖最后由 Joe.xu 于 2022-4-25 17:33 编辑

想死大家了，带个教程贴给格友们请安

大家可能都有过这种需求，需要在评论或者大串文字中高亮显示关键字，如下图（图片来源于格友的帖子），

image.png658841552.png

接下来，我们分两种情况跟大家介绍实现步骤

（一）表单实现高亮

1.引入一个全局JS,主要的作用是将需要高亮的关键字加上样式style
image.png537720031.png

2.因为JS返回的数据包含了css样式，所以需要选择html编辑器来展示数据，记得反勾选显示菜单栏
image.png601256713.png

3.输入了关键字和高亮颜色之后，按钮中获取数据，将调用JS处理之后的数据放在html编辑器中

image.png12447203.png

效果如下

（二）图文列表所有数据实现高亮

这个功能其实大家在生活中经常会遇到，就比如我们论坛中，搜索了一个关键字之后，
会将搜索到的数据中带有关键字的高亮，这种展示大家很容易想到用图文列表来做，
具体的实现分下面几步
image.png313997191.png

（1）因为图文列表的数据是基于表格的，所以要先绑定表格，并且根据关键字设置查询命令

image.png358530272.png

（2）基于表格的数据，设计图文列表，我这里比较简单，只用了一个文本框和html编辑器

image.png79730223.png

（3）在绑定了ID的文本框中设置命令，取到对应的内容，调用JS进行样式处理，
最后通过设置单元格属性命令，将数据放在html展示

image.png356052855.png

效果如下：

改变字体颜色.fgcc (244.53 KB, 下载次数: 465)

		自动登录	找回密码
密码			立即注册

[神奇功能] 帮你打开活字格更神奇的功能：一百零五，高亮显示搜索关键字