微信小程序实现搜索关键词高亮的示例代码

1，前言项目中碰到一个需求，搜索数据并且关键词要高亮显示，接到需求，马上开干。源码已经做成了小程序代码片段，放入了GitHub了，文章底部有源码链接。2，思路博主第一时间想到的就是使用split，根据搜索的关键词，处理后台返回的数据，然后indexOf找到关键字，给每个字添加deep字段，deep为true，则高亮，为false，则正常。由于是小程序，所以楼主直接做成了一个高亮组件，代码很简单，实现步骤如下。3，代码逻辑模拟数据如下在data中定义了一个空数组，用于存放根据搜索key过滤后的数据搜索的wxml和方法定义了一个高亮组件highlight在页面中将搜索出来的每一项item和key参数传递给组件在组件中接收组件的初始数据组件的wxml组件的高亮数据处理源码GitHub地址：