WeChat mini-app Search Component wxSearch instance details, mini-app wxsearch

WxSearch

WxSearch elegant mini-app search box

I. Functions

Supports customizing popular keys
Search history is supported.
Supported search recommendations
Supports searching history Cache

Ii. Use

1. Copy the entire wxSearch folder to the root directory.
2. Introduction

// Introduce the template <import src = "/wxSearch. wxml "/> <template is =" wxSearch "data =" {wxSearchData} "/> // introduce @ import"/wxSearch in wxss. wxss ";

3. Use the 3.1 wxml file. There are two templates: one for the wxSearch author and the other for the weui.

3.1.1 first template

// The template <import src = "/wxSearch. wxml "/> <view class =" wxSearch-section "> <view class =" wxSearch-pancel "> <input bindinput =" wxSearchInput "bindfocus =" wxSerchFocus "value = "{ {wxSearchData. value }}" bindblur = "wxSearchBlur" class = "wxSearch-input" placeholder = "Search"/> <button class = "wxSearch-button" bindtap = "wxSearchFn" size =" mini "plain =" true "> Search </button> </view> <template is =" wxSearch "data =" {wxSearchData} "/>

3.1.2 second Template

<Import src = ".. /.. /wxSearch. wxml "/> <view class =" weui-search-bar "> <view class =" weui-search-bar _ form "> <view class =" weui-search- bar _ box "> <icon class =" weui-icon-search_in-box "type =" search "size =" 14 "> </icon> <input type =" text "class =" weui- search-bar _ input "placeholder =" search "value =" {wxSearchData. value }}" bindfocus = "wxSerchFocus" bindinput = "wxSearchInput" bindblur = "wxSearchBlur"/> <view class = "weui-icon-clear" wx: if = "{inputVal. length> 0 }}" bindtap = "clearInput"> <icon type = "clear" size = "14"> </icon> </view> </view> <template is = "wxSearch" data = "{wxSearchData}"/>

Note: This template must use the weui. wxss file. Please introduce it in the app. wxss file.

3.1.3 if you do not like the two search styles in the Custom Search box, you can also define them by yourself. You only need to ensure that the event is triggered.

// The search input box must ensure that the following three events are correctly written <input bindfocus = "wxSerchFocus" bindinput = "wxSearchInput" bindblur = "wxSearchBlur"/> // search for button events <button bindtap = "wxSearchFn"/>

3.2 js files

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); }

3.3

Iii. Source Code explanation

Module. exports = {init: init, initColor: initColors, labels: enabled, wxSearchInput: wxSearchInput, wxSearchFocus: wxSearchFocus, labels: wxSearchBlur, wxSearchKeyTap: wxSearchKeyTap, labels: enabled, cost: disabled, wxSearchDeleteAll: wxSearchDeleteAll, wxSearchHiddenPancel: wxSearchHiddenPancel} init initializes the wxSearch parameter: that var that = this is passed in. The barHeight search box height is set based on the height of the search box you set. The display content of the popular search in the keys array is isShowKey. The default display of popular search is false) isShowHis display historical search display by default (false is not displayed) callBack function source code initialization wxSearchData content wxSearchData: {view: {isShow: false, // whether the search interface is displayed. The search key is hidden by default. When the input box obtains the focus, the searchbarHeght: 20 is displayed. // calculate isShowSearchKey: true based on the screen height and barHeight of the mobile phone, // The default value is true isShowSearchHistory: true, // The default value is true} keys: [], // custom hot search, input keys his: [], // historical search keyword, get value from cache: ''// search content} wxSearch. init (that, barHeight, keys, isShowKey, isShowHis, callBack); initMindKeys initialize mindKeys // mindKeys is the set var mindKeys = ['weappdev. com ', 'applet developer', 'developer', 'applet']; WxSearch. initMindKeys (mindKeys );

Other event functions will not be described in detail. There may be some bugs and you can modify them as needed.

Thank you for reading this article. I hope it will help you. Thank you for your support for this site!