怎样才能实现微信小程序自定义搜索功能

　　不少用户表示想要使用微信小程序自定义搜索的功能，但事实上，微信官方一开始并没有相应地设置，也不支持小程序模糊搜索。那么怎样才能实现微信小程序自定义搜索呢?小编前不久发现了一个小程序开源项目组件，使用起来比较简单，但是提供的小程序文档不是很详细，所以经过自己的琢磨之后为大家详细讲解一下。

　　一、功能介绍

　　支持自定义热门key

　　支持搜索历史

　　支持搜索建议

　　支持搜索历史(记录)小程序缓存

　　二、使用

　　将wxSearch文件夹整个拷贝到根目录下

　　引入

　　// wxml中引入模板

　　// wxss中引入

　　@import "/wxSearch/wxSearch.wxss";

　　使用

　　3.1 wxml文件

　　这里有两种模板：一种为wxSearch作者提供的模板，另一种是weui提供的模板。

　　3.1.1 第一种模板

　　// wxSearch作者提供的小程序模板

　　搜索

　　3.1.2 第二种模板

　　bindfocus="wxSerchFocus" bindinput="wxSearchInput" bindblur="wxSearchBlur" />

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

　　3.1.3 自定义搜索框

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

　　// 搜索输入框需要保证下面三个事件的书写正确

　　// 搜索按钮的事件

　　3.2 js文件

　　var WxSearch = require('../../wxSearch/wxSearch.js');

　　var app = getApp();

　　Page({

　　data: {

　　// wxSearchData:{

　　// view:{

　　// isShow: true

　　// }

　　// }

　　},

　　onLoad: function () {

　　console.log('onLoad');

　　var that = this;

　　//初始化的时候渲染wxSearchdata

　　WxSearch.init(that,43,['weappdev','小程序','wxParse','wxSearch','wxNotification']);

　　WxSearch.initMindKeys(['weappdev','微信小程序开发','微信开发','微信小程序']);

　　},

　　wxSearchFn: function(e){

　　var that = this

　　WxSearch.wxSearchAddHisKey(that);

　　},

　　wxSearchInput: function(e){

　　var that = this

　　WxSearch.wxSearchInput(e,that);

　　},

　　wxSerchFocus: function(e){

　　var that = this

　　WxSearch.wxSearchFocus(e,that);

　　},

　　wxSearchBlur: function(e){

　　var that = this

　　WxSearch.wxSearchBlur(e,that);

　　},

　　wxSearchKeyTap:function(e){

　　var that = this

　　WxSearch.wxSearchKeyTap(e,that);

　　},

　　wxSearchDeleteKey: function(e){

　　var that = this

　　WxSearch.wxSearchDeleteKey(e,that);

　　},

　　wxSearchDeleteAll: function(e){

　　var that = this;

　　WxSearch.wxSearchDeleteAll(that);

　　},

　　wxSearchTap: function(e){

　　var that = this

　　WxSearch.wxSearchHiddenPancel(that);

　　}

　　})

　　通过这个小程序开源组件，大家就能实现微信小程序自定义搜索了，关于这个组件的功能实现以及使用步骤，小编介绍得已经很详细了，希望能够真正帮助到大家。更多相关资料请关注微信小程序商店。

　　微信小程序含历史记录的搜索框怎么开发

　　微信小程序搜索框编写怎么做?

　　微信小程序搜索排名，微信小程序也玩搜索排名?