微信小程序实现全局搜索代码高亮的示例
2018-03-30 09:18
1136 查看
需求
最近在做微信小程序的时候,需要实现在搜索框的输入内容的时候实现全局匹配实现高亮效果,目前的思路是,递归后台来返回的数据,并将对象的value值替换为需要的dom节点,并且通过rich-text来实现,高亮效果。
代码
wxml:
<view class='homePage'> <input bindinput="bindKeyInput"></input> <view wx:for="{{newJson}}" wx:for-item='item' wx:key> <rich-text nodes="{{item.name}}"></rich-text> <rich-text nodes="{{item.address}}"></rich-text> <rich-text nodes="{{item.age}}"></rich-text> <view wx:if="{{item.aihao}}" wx:for="{{item.aihao}}" wx:for-item='sitem' wx:key> <rich-text nodes="{{sitem}}"></rich-text> </view> </view> </view>
js:
//index.js const app = getApp() Page({ data: { json: [{ name: 'eiolewkfp', age: 'awdqwwdk', address: 'aueifwhefwfheffoewjowef',aihao:['sdsd','sdfsd','sdsf']}, { name: '98797', age: '6544656', address: '65494364' }], // 可以是任何类型的数据 newJson: '', tempText:'' }, onLoad: function (options) { this.setData({ newJson:this.data.json }) }, digui: function (newJson,obj,key) { // 递归方法,来遍历最内层的字符串并通过正则来替换 var that = this; var reg = new RegExp(that.data.tempText,'g'); if (newJson.constructor == Array) { newJson.forEach(function (item,index) { if (item.constructor == String){ obj[key].splice(index, 1, item.replace(reg, "<span style='color:red'>" + that.data.tempText + "</span>")) }else{ that.digui(item, newJson); } }); } else if (newJson.constructor == Object) { var json = {}; for (var key in newJson) { json[key] = newJson; that.digui(newJson[key],newJson,key); } } else if (newJson.constructor == String) { // 这里做全局替换 if(key){ obj[key] = newJson.replace(reg, "<span style='color:red'>" + that.data.tempText + "</span>") } } }, bindKeyInput: function (e) { // 每次输入来监听键盘,处理匹配的数据 var text = e.detail.value; this.setData({ tempText:text }) var newJson = JSON.parse(JSON.stringify(this.data.json)); // 实现深复制 this.digui(newJson); this.setData({ newJson:newJson }) } })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- 微信小程序首页的分类功能和搜索功能的实现思路及代码详解
- java实现微信小程序登录态维护的示例代码
- 微信小程序实现图片懒加载的示例代码
- [微信小程序]实现一个自定义遮罩层组件(完整示例代码附效果图)
- 微信小程序实战篇之购物车的实现代码示例
- 微信小程序中实现手指缩放图片的示例代码
- AjaxPanel自定义控件实现页面无刷新数据交互(做了个示例程序, 效果确实比较Cool, 用法非常简单! )(示例代码下载)
- 微信小程序实现之手势锁功能实例代码
- [微信小程序]组件化开发,以一个自定义模块框组件当做示例(附完整示例代码和效果图)
- easyUI实现类似搜索框关键词自动提示功能示例代码
- 微信小程序实战(二)---实现搜索页面
- 微信小程序 ecshop地址三级联动实现实例代码
- 微信小程序自定义select下拉选项框组件的实现代码
- 4部分代码轻松实现微信小程序支付功能
- nodejs获取微信小程序带参数二维码实现代码
- 微信小程序 --- 10行代码实现滑动tab切换
- 微信小程序实现底部导航栏目示例
- 微信小程序实现简单input正则表达式验证功能示例
- php站内搜索并高亮显示关键字的实现代码
- 微信小程序倒计时功能实现代码