很多項目中會有搜索，有時是要點擊搜索按鈕時搜索，有時是點擊鍵盤完成搜索，還有時需要實時搜索，而高亮關鍵字也是一個常見的需求。
今天寫一個實時搜索并高亮關鍵字的微信小程序demo，已上傳GitHub，需要自取
微信小程序實時搜索高亮關鍵字demo
這是一個我項目中的截圖，但是數據結構又略微有點復雜，不好演示，所以單獨又寫了一個demo，數據來自干活集中營
實時搜索高亮關鍵字
關鍵函數：將字符串使用關鍵字分割：
//返回一個使用key切割str后的數組，key仍在數組中
getHilightStrArray: function(str, key) {
return str.replace(new RegExp(`${key}`, 'g'), `%%${key}%%`).split('%%');
}
一、新建一個自定義組件，作為顯示有高亮字符串的組件
1、在自定義組件wxml中循環數組并判斷是否是關鍵字然后設置不同的class，代碼如下：
<view>
<text wx:for="{{searchArray}}" wx:key="*this" class="{{item == keyName ? 'highlight' : 'normal' }}">{{item}}</text>
</view>
2、在自定義組件js中，定義傳入key和str的屬性對象datas
properties: {
/**
* {key:'關鍵字',name:'待匹配字符串'}
*/
datas: {
type: Object,
observer: "_propertyDataChange"
}
},
開始是單獨傳入key和name，表現正常，但是發現在某些特殊情況得不到想要的結果，這里就不列出來了，有興趣的朋友可以自己嘗試。
3、在自定義組件js中，處理傳入的數據
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('%%');
}
}
自定義組件就此完成了
二、在搜索頁面使用
1、在json文件中引入自定義組件
{
"usingComponents": {
"searchHighlightTextView": "../../component/searchHighlightTextView/searchHighlightTextView"
},
"navigationBarTitleText": "搜索"
}
2、在搜索頁面wxml中編寫input，和自定義組件searchHighlightTextView：
<view class="search">
<input focus='auto' bindinput="searchInputAction" placeholder="輸入你要搜索的內容" />
</view>
<!-- 搜索時內容 -->
<view wx:if="{{searchResultDatas.length > 0}}" class="search-content-body">
<block wx:for="{{searchResultDatas}}">
<view class="search-result-item">
<searchHighlightTextView
class="result-item"
datas='{{searchData[index]}}'
bindtap="chooseSearchResultAction"
data-id='{{item.ganhuo_id}}'
/>
</view>
</block>
</view>
3、在搜索頁面獲取輸入內容并請求網絡賦值，這里有個關鍵點我們使用的datas是一個Object，所以在獲取到數據中先組searchData這個Object:
wx.request({
url: 'https://gank.io/api/search/query/' +value + '/category/all/count/10/page/1',
data: '',
success: function (res) {
// console.log(res)
let searchData = res.data.results.map(function(res){
return { key: value,name:res.desc}
})
that.setData({
searchData,
searchResultDatas: res.data.results
})
}
效果：
搜索關鍵詞高亮
完整微信小程序demo源碼已上傳GitHub，需要自取，GitHub地址：
微信小程序實時搜索高亮關鍵字demo
賞我一個贊吧~~~
