搜索框关键字高亮。

分类: 文章 • 2022-11-29 15:16:59

如百度之类的，搜索框里的联想关键字高亮，如下效果：
搜索框关键字高亮。
步骤：将关键字联想的每项内容用v-html绑定，触发转换颜色函数，给输入关键字加样式使其高亮，函数中用正则匹配关键字，再用高亮字替换显示的文本中的关键字
1.绑定v-html，触发高亮函数

2.定义高亮函数转换：
搜索框关键字高亮。
总结：关键是用正则匹配全局的联想出来的关键字，将关键字替换成有颜色的关键字即可。