好资源导航 » 文章资讯 » 微信小程序实现全局搜索代码高亮的示例

微信小程序实现全局搜索代码高亮的示例

2023-09-14 18:01:04 457

需求

最近在做微信小程序的时候，需要实现在搜索框的输入内容的时候实现全局匹配实现高亮效果，目前的思路是，递归后台来返回的数据，并将对象的value值替换为需要的dom节点，并且通过rich-text来实现，高亮效果。

代码

wxml:

js:

//index.js
constapp=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){//递归方法，来遍历最内层的字符串并通过正则来替换
varthat=this;
varreg=newRegExp(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,""+that.data.tempText+""))
}else{
that.digui(item,newJson);
}
});
}elseif(newJson.constructor==Object){
varjson={};
for(varkeyinnewJson){
json[key]=newJson;
that.digui(newJson[key],newJson,key);
}
}elseif(newJson.constructor==String){//这里做全局替换
if(key){
obj[key]=newJson.replace(reg,""+that.data.tempText+"")
}
}
},
bindKeyInput:function(e){//每次输入来监听键盘，处理匹配的数据
vartext=e.detail.value;
this.setData({
tempText:text
})
varnewJson=JSON.parse(JSON.stringify(this.data.json));//实现深复制

this.digui(newJson);
this.setData({
newJson:newJson
})
}

})

源代码地址

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

微信小程序实现全局搜索代码高亮的示例

热门推荐

随机推荐