微信小程序--搜索关键词高亮

概述

今天在分享个微信小程序实战 搜索关键词高亮功能案例。今天我们就分享这样的小教程。希望对大家有所帮助。

不多说了，二当家要上图来啦！


快去拿个小板凳，坐等更多更新

注：如未能获取成功，或者遇到其他问题，本人微信：geekxz 。

如果需要更多动画，欢迎关注 【极客小寨】微信公众号，回复搜索关键词高亮下载链接！所有文档会持续更新，欢迎关注一起成长！

示例部分文件展示

//获取应用实例
var app = getApp()
Page({
  data: {
    inputs:'极客小寨',
    result: [],
    userInfo: {}
  },

  //事件处理函数
  bindSearchInput: function (e) {
    this.inputs = e.detail.value;
    console.log('inputs',this.inputs);
    this.data.inputs = e.detail.value;
    this.setData(this.data);
  },
  bindSearchTap: function () {
    this.search_databse();
  },
  search_databse: function () {
  
    };

    let database= [
      '极客小寨小程序开发_百度百科', 
      '极客小寨微信小程序正式上线', 
      '极客小寨微信小程序有哪些?关注极客小寨微信公众号获取微信小程序最全汇总?',
      '公众号出售-公众号价格-公众号买卖-A5公众号交易平台',
      '如何运营出一个有吸引力的微信公众号? - 微信公众平台号 - 知乎'
    ];
    let searched = [];
    let inputs = this.data.inputs;
    for (let i = 0; i < database.length; i++) {
      var current_word = database[i];
      if (current_word.indexOf(inputs) > -1) {
        searched.push(hilight_word(inputs, current_word))
      }
    }
    // console.log(searched);
    this.data.result=searched;
    console.log('this data',this.data);
    this.setData(this.data);
  },
  onLoad: function () {
    console.log('onLoad')
    // var that = this
    //调用应用实例的方法获取全局数据
    // app.getUserInfo(function(userInfo){
    //   //更新数据
    //   that.setData({
    //     userInfo:userInfo
    //   })
    // })
  }
})