Sample code for highlighting search keywords in WeChat mini program

list:[
 'Wuhan University',
 'Huazhong University of Science and Technology',
 'Huazhong Normal University',
 'Zhongnan University of Economics and Law',
 'China University of Geosciences',
 'Wuhan University of Technology',
 'Huazhong Agricultural University',
 'Wuhan University of Science and Technology',
],

filterList:[], //Filtered

// wxml
<view class="search_box">
 <input type="text" placeholder="Please enter the 985/211 university in Wuhan" bindinput="searchValue" class="search"/>
</view>

// Search method 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: [] })
 }
}

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

<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:[], //Processed data}

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

// Non-empty filter_changeText(e){
  if(e.length > 0 && this.properties.text.indexOf(e) > -1){
   this._filterHighlight(this.properties.text, e);
  }
 },
 /**
 * Keyword highlighting* @param { String } text - text* @param { String } key - keyword*/
 _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 })
 }