這次帶給大家微信小程式開發(fā)中怎樣實(shí)現(xiàn)搜尋內(nèi)容高亮功能，微信小程式開發(fā)中怎樣實(shí)現(xiàn)搜尋內(nèi)容高亮功能的注意事項(xiàng)有哪些，以下就是實(shí)戰(zhàn)案例，一起來(lái)看一下。

需求

最近在做微信小程式的時(shí)候，需要實(shí)現(xiàn)在搜尋框的輸入內(nèi)容的時(shí)候?qū)崿F(xiàn)全域匹配實(shí)現(xiàn)高亮效果，目前的思路是，遞歸後臺(tái)來(lái)傳回的數(shù)據(jù)，並將物件的value值替換為需要的dom節(jié)點(diǎn)，並且透過(guò)rich-text來(lái)實(shí)現(xiàn)，高亮效果。

程式碼

wxml:

<view class=&#39;homePage&#39;>
??<input bindinput="bindKeyInput"></input>
??<view wx:for="{{newJson}}" wx:for-item=&#39;item&#39; 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=&#39;sitem&#39; 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'?}],?//?可以是任何類型的數(shù)據(jù)
????newJson:?'',
????tempText:''
??},
??onLoad:?function?(options)?{
????this.setData({
??????newJson:this.data.json
????})
??},
??digui:?function?(newJson,obj,key)?{?//?遞歸方法，來(lái)遍歷最內(nèi)層的字符串并通過(guò)正則來(lái)替換
????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=&#39;color:red&#39;>"?+?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=&#39;color:red&#39;>"?+?that.data.tempText?+?"</span>")
??????}
????}
??},
??bindKeyInput:?function?(e)?{?//?每次輸入來(lái)監(jiān)聽(tīng)鍵盤，處理匹配的數(shù)據(jù)
????var?text?=?e.detail.value;
????this.setData({
??????tempText:text
????})
????var?newJson?=?JSON.parse(JSON.stringify(this.data.json));?//?實(shí)現(xiàn)深復(fù)制
????
????this.digui(newJson);
????this.setData({
??????newJson:newJson
????})
??}
})

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！

推薦閱讀：

如何使用CDN優(yōu)化項(xiàng)目載入速度

使用Angular單向資料流技巧總結(jié)

以上是微信小程式開發(fā)中怎樣實(shí)現(xiàn)搜尋內(nèi)容高亮功能的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！