Project encountered a demand, WeChat small program search data and keywords to highlight, received the demand, immediately open dry. Go up to the effect map first.

2, ideas

The blogger's first thought is to use spinit, according to the search keywords, processing the data returned in the background, and then indexOf to find the keyword, add a deep field to each word, deep true, then highlight, for false, it is normal. Because it is a small program, so the landlord directly made a highlight component, the code is very simple, the implementation steps are as follows.

3, code logic

The simulation data is as follows

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

An empty array is defined in data to hold data filtered from the search key

filterList:[],//过滤后的

Search for wxml and methods

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

A highlight component highlight is defined

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

Each item searched out of the site and key parameters is passed to the component on the page

<view class="list_li" wx:for="{{ filterList }}" wx:key="index" data-index="{{ index }}" bindtap="pitchOn">
  <highlight text="{{ item }}" key="{{ value }}" />
</view>

Received in the component

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

The initial data for the component

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

The wxml of the component

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

The component's highlighted data processing

// 非空过滤
 _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 })
 }

From: https://www.cnblogs.com/-pdd/p/14592080.html