微信小程序实现搜索关键词高亮的示例代码

list:[
 '武汉大学',
 '华中科技大学',
 '华中师范大学',
 '中南财经政法大学',
 '中国地质大学',
 '武汉理工大学',
 '华中农业大学',
 '武汉科技大学',
],

filterList:[],//过滤后的

// wxml

 


// 搜索方法
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  -1){
    arr.push(this.data.list[i])
   }
  }
  this.setData({ filterList: arr })
 }else{
  this.setData({ filterList: [] })
 }
}

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

properties: {
 text:String,
 key:{
  type:String,
  value:'',
  observer:'_changeText'
 }
}

data: {
 highlightList:[],//处理后的数据
}

{{ item.val }}

// 非空过滤
 _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  {
    if(item.val === keyList[k]){
     item.deep = true;
    }
   })
  }
  this.setData({ highlightList:list })
 }