小程序模板网

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

发布时间:2018-08-18 09:04 所属栏目:小程序开发教程

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

今天写一个实时搜索并高亮关键字的微信小程序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('%%');
    }
    }
    


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/24732.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询