微信小程序搜索關鍵詞高亮怎么實現

本篇內容介紹了“微信小程序搜索關鍵詞高亮怎么實現”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

項目中碰到一個需求，微信小程序搜索數據并且關鍵詞要高亮顯示，接到需求，馬上開干。先上效果圖。

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

“微信小程序搜索關鍵詞高亮怎么實現”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！