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){
 lethttp://www.cppcns.com val = e.detail.value;
 this.setData({ value:val })
 if(val.length > 0){
  this.setData({ filterList:[] })
  let arr = [];
  for(let i = 0;i < this.data.lioOtUoiw
 
st.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="{{ valhttp://www.cppcns.comue }}" />
</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 }}</tewww.cppcns.comxt>

元件的高亮資料處理

// 非空過濾
 _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

到此這篇關於微信小程式實現搜尋關鍵詞高亮的示例程式碼的文章就介紹到這了,更多相關小程式搜尋關鍵詞高亮內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！