微信小程序开发中如何实现突出搜索内容的功能(小程序搜索框的简单实现)

这次给大家带来的是如何在微信小程序开发中实现搜索内容高亮功能，以及在微信小程序开发中如何实现搜索内容高亮功能有哪些注意事项。下面是实际案例，大家来看看。

要求

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

密码

wxml:

& ltview class = & # 039主页& # 039；& gt& lt输入bindinput = & quotbindKeyInput&quot& gt& lt/input & gt；& lt查看wx:for = & quot；{ { newJson } } & quotwx:for -item = & # 039；item & # 039wx:key & gt；& ltrich -text nodes = & quot；{ { item.name } } & quot& gt& lt/rich -text & gt；& ltrich -text nodes = & quot；{ { item.address } } & quot& gt& lt/rich -text & gt；& ltrich -text nodes = & quot；{ { item.age } } & quot& gt& lt/rich -text & gt；& ltview wx:if = & quot；{ { item.aihao } } & quotwx:for = & quot；{ { item.aihao } } & quotwx:for -item = & # 039；sitem & # 039wx:key & gt；& ltrich -text nodes = & quot；{ { sitem } } & quot& gt& lt/rich -text & gt；& lt/view & gt；& lt/view & gt；& lt/view & gt；js:

//index . js const app = getApp()Page({ data:{ JSON:[{ name:& # 039；eiolewkfp & # 039，年龄:& # 039；awdqwwdk & # 039，地址:& # 039；aueifwhefwfheffoewjowef & # 039，艾蒿:[& # 039；sdsd & # 039,'sdfsd & # 039,'sdsf & # 039]}，{姓名:& # 039；98797'，年龄:& # 039；6544656'，地址:& # 039；65494364'}]，//可以是任意类型的数据new JSON:& # 039；'，temp text:& # 039；'}、onload:function(options){ this . setdata({ new JSON:this . data . JSON })}、digui: function (newjson，obj，key){//递归方法遍历最里面的字符串，通过正则化替换that = thisvar reg = new RegExp(that . data . temp text，& # 039；g & # 039);if(new JSON . constructor = = Array){ new JSON . foreach(function(item，index){ if(item . constructor = = String){ obj[key]。拼接(index，1，item.replace(reg，& quot& ltspan style = & # 039颜色:红色& # 039；& gt"+that . data . temp text+& quot；& lt/span&gt。"))}else{ that.digui(item，new JSON)；} });} else if(new JSON . constructor = = Object){ var JSON = { }；for(new JSON中的var key){ JSON[key]= new JSON；that.digui(newJson[key]，newJson，key)；} } Else if(new JSON . constructor = = string){//这里做全局替换if(key){ obj[key]= new JSON . replace(reg，" & ltspan style = & # 039颜色:红色& # 039；& gt"+that . data . temp text+& quot；& lt/span&gt。")}}}，bind键输入:function(e){//每次输入的时候都会监听键盘，处理匹配的数据var text = e . detail . value；this . setdata({ temp text:text })var new JSON = JSON . parse(JSON . stringify(this . data . JSON))；//实现this.digui(newJson)的深度复制；this . setdata({ new JSON:new JSON } })相信你看完这个案例已经掌握了方法。更多精彩请关注即时码站其他相关文章！

推荐阅读:

如何利用CDN优化项目加载速度

使用角度单向数据流的技巧总结