Wechat applet search box

Keywords: Javascript github

wxSearch elegant wechat applet search box
1, Function
Support custom hot key
Support search history
Support search suggestions
Support search history (record) caching
2, Use
1. Copy the whole wxSearch folder to the root directory

2. Introduction

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

3. Using the 3.1 wxml file, there are two types of templates: one for the wxSearch author, and the other for the weui.

3.1.1 first formwork

//  wxSearch Template provided by the author 
<import src="/wxSearch/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> 
</view> 
<template is="wxSearch" data="{{wxSearchData}}"/>

3.1.2 second formwork

<import src="../../wxSearch/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>  
 </view> 
</view> 
<template is="wxSearch" data="{{wxSearchData}}"  />

Note: This template needs to use the weui.wxss file, please introduce it in the app.wxss file.

3.1.3 custom search box if you don't like the above two search styles, you can also define your own, just to ensure the triggering of events.
3.2 js file

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 renderings

3, Source code interpretation

module.exports = {
    init: init,
    initColor: initColors,
    initMindKeys: initMindKeys,
    wxSearchInput: wxSearchInput,
    wxSearchFocus: wxSearchFocus,
    wxSearchBlur: wxSearchBlur,
    wxSearchKeyTap: wxSearchKeyTap,
    wxSearchAddHisKey:wxSearchAddHisKey,
    wxSearchDeleteKey:wxSearchDeleteKey,
    wxSearchDeleteAll:wxSearchDeleteAll,
    wxSearchHiddenPancel:wxSearchHiddenPancel
}
init Initialization wxSearch

//Parameter: that var that = this Just transfer in later
barHeight Search box height is set according to the search box height you set
keys Display contents of array hot search
isShowKey Show popular search default(false Not shown)
isShowHis Show history search default(false Not shown)
callBack Callback function
//What does the source code do 
//Content of wxSearchData initialized

wxSearchData:{        
 view:{             
   isShow: false, //Whether to display the search interface, hidden by default, displayed when the input box gets the focus
   searchbarHeght: 20, //According to the screen height and incoming barHeight Calculate
   isShowSearchKey: true,  //Default is true        
   isShowSearchHistory: true, //Default is true        }        
   keys:[],//Custom Hot search, incoming keys        
   his:[],//Historical search keywords, getting from cache        
   value: ''  // Search content      }  
wxSearch.init(that, barHeight, keys, isShowKey, isShowHis, callBack)；
initMindKeys Initialization mindKeys 
// mindKeys Is the collection of content to be retrieved var mindKeys = ['weappdev.com','Wechat applet development','WeChat development','Wechat applet']; WxSearch.initMindKeys(mindKeys);

4, Source address https://github.com/xingzaihahaha/wx.search

Posted by mlefebvre on Sun, 05 Jan 2020 09:01:06 -0800

Programmer Group

Wechat applet search box

Hot Keywords