微信小程序实时搜索并高亮关键字效果

很多项目中会有搜索，有时是要点击搜索按钮时搜索，有时是点击键盘完成搜索，还有时需要实时搜索，而高亮关键字也是一个常见的需求。

今天写一个实时搜索并高亮关键字的微信小程序demo，已上传GitHub，需要自取

微信小程序实时搜索高亮关键字demo

这是一个我项目中的截图，但是数据结构又略微有点复杂，不好演示，所以单独又写了一个demo，数据来自干活集中营 

实时搜索高亮关键字 
关键函数：将字符串使用关键字分割：

1. //返回一个使用key切割str后的数组，key仍在数组中
2. getHilightStrArray: function(str, key) {
3. return str.replace(new RegExp(`${key}`, 'g'), `%%${key}%%`).split('%%');
4. }

一、新建一个自定义组件，作为显示有高亮字符串的组件

1、在自定义组件wxml中循环数组并判断是否是关键字然后设置不同的class，代码如下：

1. <view> <text wx:for="{{searchArray}}" wx:key="*this" class="{{item == keyName ? 'highlight' : 'normal' }}">{{item}}</text> </view>

2、在自定义组件js中，定义传入key和str的属性对象datas

1. properties: { /** * {key:'关键字',name:'待匹配字符串'} */ datas: { type: Object, observer: "_propertyDataChange" } },

开始是单独传入key和name，表现正常，但是发现在某些特殊情况得不到想要的结果，这里就不列出来了，有兴趣的朋友可以自己尝试。  3、在自定义组件js中，处理传入的数据

1. methods: { _propertyDataChange: function(newVal) { console.log(newVal) let searchArray = this.getHilightStrArray(newVal.name, newVal.key) this.setData({ keyName: newVal.key, searchArray: searchArray }) }, getHilightStrArray: function(str, key) { return str.replace(new RegExp(`${key}`, 'g'), `%%${key}%%`).split('%%'); } }