快捷導(dǎo)航

微信小程序?qū)崿F(xiàn)搜索關(guān)鍵詞高亮的示例代碼

更新時(shí)間：2021年03月30日 09:32:50 作者：鵬多多

這篇文章主要介紹了微信小程序?qū)崿F(xiàn)搜索關(guān)鍵詞高亮的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

1，前言

項(xiàng)目中碰到一個(gè)需求，搜索數(shù)據(jù)并且關(guān)鍵詞要高亮顯示，接到需求，馬上開干。先上效果圖。源碼已經(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

到此這篇關(guān)于微信小程序?qū)崿F(xiàn)搜索關(guān)鍵詞高亮的示例代碼的文章就介紹到這了,更多相關(guān)小程序搜索關(guān)鍵詞高亮內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: