概述

今天在分享個微信小程式實戰 搜尋關鍵詞高亮功能案例。今天我們就分享這樣的小教程。希望對大家有所幫助。

不多說了，二當家要上圖來啦！


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

注：如未能獲取成功，或者遇到其他問題，本人微信：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
    //   })
    // })
  }
})