|
很多項(xiàng)目中會(huì)有搜索，有時(shí)是要點(diǎn)擊搜索按鈕時(shí)搜索，有時(shí)是點(diǎn)擊鍵盤(pán)完成搜索，還有時(shí)需要實(shí)時(shí)搜索，而高亮關(guān)鍵字也是一個(gè)常見(jiàn)的需求。
今天寫(xiě)一個(gè)實(shí)時(shí)搜索并高亮關(guān)鍵字的微信小程序demo，已上傳GitHub，需要自取
微信小程序?qū)崟r(shí)搜索高亮關(guān)鍵字demo
這是一個(gè)我項(xiàng)目中的截圖，但是數(shù)據(jù)結(jié)構(gòu)又略微有點(diǎn)復(fù)雜，不好演示，所以單獨(dú)又寫(xiě)了一個(gè)demo，數(shù)據(jù)來(lái)自干活集中營(yíng)
實(shí)時(shí)搜索高亮關(guān)鍵字
關(guān)鍵函數(shù)：將字符串使用關(guān)鍵字分割：
-
//返回一個(gè)使用key切割str后的數(shù)組，key仍在數(shù)組中
-
getHilightStrArray: function(str, key) {
-
return str.replace(new RegExp(`${key}`, 'g'), `%%${key}%%`).split('%%');
-
}
一、新建一個(gè)自定義組件，作為顯示有高亮字符串的組件
1、在自定義組件wxml中循環(huán)數(shù)組并判斷是否是關(guān)鍵字然后設(shè)置不同的class，代碼如下：
-
<view>
<text wx:for="{{searchArray}}" wx:key="*this" class="{{item == keyName ? 'highlight' : 'normal' }}">{{item}}</text>
</view>
|
2、在自定義組件js中，定義傳入key和str的屬性對(duì)象datas
-
properties: {
/**
* {key:'關(guān)鍵字',name:'待匹配字符串'}
*/
datas: {
type: Object,
observer: "_propertyDataChange"
}
},
|
開(kāi)始是單獨(dú)傳入key和name，表現(xiàn)正常，但是發(fā)現(xiàn)在某些特殊情況得不到想要的結(jié)果，這里就不列出來(lái)了，有興趣的朋友可以自己嘗試。 3、在自定義組件js中，處理傳入的數(shù)據(jù)
-
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('%%');
}
}
|
|
