微信小程式實現搜尋關鍵詞高亮

鵬多多發表於2021-03-29
微信小程式

目錄

1，前言

專案中碰到一個需求，搜尋資料並且關鍵詞要高亮顯示，接到需求，馬上開幹。先上效果圖。原始碼已經做成了小程式程式碼片段，放入了GitHub了，文章底部有原始碼連結。

效果圖

2，思路

博主第一時間想到的就是使用split，根據搜尋的關鍵詞，處理後臺返回的資料，然後indexOf找到關鍵字，給每個字新增deep欄位，deep為true，則高亮，為false，則正常。由於是小程式，所以樓主直接做成了一個高亮元件，程式碼很簡單，實現步驟如下。

3，程式碼邏輯

模擬資料如下

list:[
  '武漢大學',
  '華中科技大學',
  '華中師範大學',
  '中南財經政法大學',
  '中國地質大學',
  '武漢理工大學',
  '華中農業大學',
  '武漢科技大學',
],

在data中定義了一個空陣列，用於存放根據搜尋key過濾後的資料

filterList:[],//過濾後的

搜尋的wxml和方法

// wxml
<view class="search_box">
  <input type="text" placeholder="請輸入武漢的985/211大學" 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: [] })
  }
}

定義了一個高亮元件highlight

"usingComponents": {
   "highlight":"../../components/highlight/highlight"
 }

在頁面中將搜尋出來的每一項item和key引數傳遞給元件

<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'
  }
}

元件的初始資料

data: {
  highlightList:[],//處理後的資料
}

元件的wxml

<text class="{{ item.deep ? 'green' : '' }}" wx:for="{{ highlightList }}" wx:key="index">{{ item.val }}</text>

元件的高亮資料處理

// 非空過濾
 _changeText(e){
   if(e.length > 0 && this.properties.text.indexOf(e) > -1){
     this._filterHighlight(this.properties.text, e);
   }
 },
 /**
 * 關鍵字高亮處理
 * @param { String } text - 文字
 * @param { String } key - 關鍵字
 */
 _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

如果看了覺得有幫助的，我是@鵬多多，歡迎 點贊 關注 評論；
END

面向百度程式設計

往期文章

個人主頁

相關文章