微信小程序搜索关键字变红

wxml:

  
        
            {{items.str}}               
            {{items.str}}
              
  

js

 value = '环网柜';
 var data = JSON.parse(res.Content).rows;   
      
  // 将标题已关键字拆开成数组    
  for (let i = 0; i < data.length; i++) {
     data[i].title = that.hilight_word(value, data[i].title);
  }           

// 根据搜索字分割字符
  hilight_word: function (key, word) {    
    let idx = word.indexOf(key), t = [];

    if (idx > -1) {
      if (idx == 0) {
        t =this.hilight_word(key, word.substr(key.length));
        t.unshift({ key: true, str: key });
        return t;
      }

      if (idx > 0) {
        t =this.hilight_word(key, word.substr(idx));
        t.unshift({ key: false, str: word.substring(0, idx) });
        return t;
      }
    }
    return [{ key: false, str: word }];
  }

效果如下

 

微信小程序搜索关键字变红_第1张图片

 

 

你可能感兴趣的:(微信小程序)