小程序搜索组件wxSearch

一、功能  支持自定义热门key  支持搜索历史  支持搜索建议  支持搜索历史(记录)缓存  二、使用  1、将wxSearch文件夹整个拷贝到根目录下  2、引入

3、使用3.1 wxml文件这里有两种模板：一种为wxSearch作者提供的模板，另一种是weui提供的模板。  3.1.1 第一种模板

3.1.2 第二种模板

注意：此模板需要使用weui.wxss文件，请在app.wxss文件中引入。

搜索框效果图2.png  3.1.3 自定义搜索框如果上面两种搜索样式都不喜欢，你也可以自己定义，只需要保证事件的触发即可。

3.2 js文件

3.3 效果图

三、源码解读

init 初始化wxSearch

1. 参数:that var that = this后传入即可
2. barHeight 搜索框高度 根据你设定的搜索框高度进行设定
3. keys 数组 热门搜索的显示内容
4. isShowKey 是否显示热门搜索 默认显示(false即可不显示)
5. isShowHis 是否显示历史搜索 默认显示(false即可不显示)
6. callBack 回调函数

源码做了什么 初始化了wxSearchData的内容

initMindKeys 初始化mindKeys  // mindKeys即为所要检索内容的集合 var mindKeys = ['weappdev.com','微信小程序开发','微信开发','微信小程序']; WxSearch.initMindKeys(mindKeys);

其他事件函数不再赘述，可能会有一些bug，可以根据情况自己进行修改。