微信小程序搜索功能，小程序自带weui，

阅读文档，WeUI组件库简介 | 微信开放文档 (qq.com)

1推荐使用方法：

在//app.json中录下下列句子

"useExtendedLib": {

"weui": true

},

//在需要使用搜索组建的页面

<mp-searchbar ext-class='search' class="search" search="{{find}}" bindinput="search" bindclear="clear"></mp-searchbar>

//js页面中，注意在data中添加keyWord作为搜索热词，方便search函数的使用

data: {

orderbyItemList: ["按编辑日期排序", "按创建日期排序", "按名称排序"],

orderbyIndex: 0,

list: [],

isListView: true,

keyWord: ""

},

search: function (event) {

this.setData({

keyWord:event.detail.value,

})

this.loadData()

},

loadData: function () {

var list = wx.getStorageSync(app.globalData.NOTE_LIST)

//app中注意设计globalData的内容

list = list.sort(this.compare(this.data.orderbyIndex == 0 ? "update_time" : this.data.orderbyIndex == 1 ? "add_time" : "title"))

list = this.findDataByKeyWord(this.data.keyWord)

this.setData({

list: list

})

wx.hideNavigationBarLoading() //完成停止加载

wx.stopPullDownRefresh() //停止下拉刷新

this.setData({

search: this.search.bind(this)

})

},

findDataByKeyWord: function (keyWord) {

var note_list = wx.getStorageSync(app.globalData.NOTE_LIST)

note_list = note_list.sort(this.compare(this.data.orderbyIndex == 0 ? "update_time" : this.data.orderbyIndex == 1 ? "add_time" : "title"))

var note_list_result = []

for (const index in note_list) {

var element = note_list[index]

if (element.title.indexOf(keyWord) != -1) {

note_list_result.push(element)

}

}

return note_list_result

},

clear:function(event){

this.setData({

keyWord:''

})

this.loadData()

},

//clear是清空函数

//app.ts

App({

$page,

$timeUtils,

globalData: {

NOTE_LIST: "NOTE_LIST",

NOTE_ITEM:"NOTE_ITEM"

},

})

//下面是备忘录记事本案例