1煌妈，前言
項(xiàng)目中碰到一個(gè)需求，搜索數(shù)據(jù)并且關(guān)鍵詞要高亮顯示宣羊，接到需求璧诵，馬上開(kāi)干。先上效果圖段只。源碼已經(jīng)做成了小程序代碼片段腮猖，放入了GitHub了鉴扫，文章底部有源碼鏈接赞枕。
效果圖
2，思路
博主第一時(shí)間想到的就是使用split坪创，根據(jù)搜索的關(guān)鍵詞炕婶，處理后臺(tái)返回的數(shù)據(jù)，然后indexOf找到關(guān)鍵字莱预，給每個(gè)字添加deep字段柠掂，deep為true，則高亮依沮，為false涯贞，則正常。由于是小程序危喉，所以樓主直接做成了一個(gè)高亮組件宋渔，代碼很簡(jiǎn)單，實(shí)現(xiàn)步驟如下辜限。
3皇拣，代碼邏輯
模擬數(shù)據(jù)如下
list:[
'武漢大學(xué)',
'華中科技大學(xué)',
'華中師范大學(xué)',
'中南財(cái)經(jīng)政法大學(xué)',
'中國(guó)地質(zhì)大學(xué)',
'武漢理工大學(xué)',
'華中農(nóng)業(yè)大學(xué)',
'武漢科技大學(xué)',
],
在data中定義了一個(gè)空數(shù)組，用于存放根據(jù)搜索key過(guò)濾后的數(shù)據(jù)
filterList:[],//過(guò)濾后的
搜索的wxml和方法
// wxml
<view class="search_box">
<input type="text" placeholder="請(qǐng)輸入武漢的985/211大學(xué)" bindinput="searchValue" class="search"/>
</view>
// 搜索方法
searchValue(e){
let val = e.detail.value;
this.setData({ value:val })
if(val.length > 0){
this.setData({ filterList:[] })
let arr = [];
for(let i = 0;i < this.data.list.length;i++){
if(this.data.list[i].indexOf(val) > -1){
arr.push(this.data.list[i])
}
}
this.setData({ filterList: arr })
}else{
this.setData({ filterList: [] })
}
}
定義了一個(gè)高亮組件highlight
"usingComponents": {
"highlight":"../../components/highlight/highlight"
}
在頁(yè)面中將搜索出來(lái)的每一項(xiàng)item和key參數(shù)傳遞給組件
<view class="list_li" wx:for="{{ filterList }}" wx:key="index" data-index="{{ index }}" bindtap="pitchOn">
<highlight text="{{ item }}" key="{{ value }}" />
</view>
在組件中接收
properties: {
text:String,
key:{
type:String,
value:'',
observer:'_changeText'
}
}
組件的初始數(shù)據(jù)
data: {
highlightList:[],//處理后的數(shù)據(jù)
}
組件的wxml
<text class="{{ item.deep ? 'green' : '' }}" wx:for="{{ highlightList }}" wx:key="index">{{ item.val }}</text>
組件的高亮數(shù)據(jù)處理
// 非空過(guò)濾
_changeText(e){
if(e.length > 0 && this.properties.text.indexOf(e) > -1){
this._filterHighlight(this.properties.text, e);
}
},
/**
* 關(guān)鍵字高亮處理
* @param { String } text - 文本
* @param { String } key - 關(guān)鍵字
*/
_filterHighlight(text, key){
let textList = text.split("");
let keyList = key.split("");
let list = [];
for(let i = 0;i < textList.length;i++){
let obj = {
deep:false,
val:textList[i]
}
list.push(obj);
};
for(let k = 0;k < keyList.length;k++){
list.forEach(item => {
if(item.val === keyList[k]){
item.deep = true;
}
})
}
this.setData({ highlightList:list })
}
源碼GitHub地址：https://github.com/pdd11997110103/ComponentWarehouse
如果看了覺(jué)得有幫助的薄嫡，我是@上進(jìn)的鵬多多氧急，歡迎 點(diǎn)贊 關(guān)注 評(píng)論；
END
往期文章
- 微信小程序自定義Tabbar毫深，附詳細(xì)源碼
- 細(xì)數(shù)JS中實(shí)用且強(qiáng)大的操作符&運(yùn)算符
- 微信小程序request請(qǐng)求的封裝
- 微信小程序API交互的自定義封裝
個(gè)人主頁(yè)
