icindy/wxsearch

wxSearch-微信小程序优雅的搜索框

wxSearch

• 🔍 微信小程序优雅的搜索框

来源

wxParse信息

• 版本号0.1
• github地址: https://github.com/icindy/wxSearch

开发信息

微信小程序开发论坛 垂直微信小程序开发交流社区

特性

• 支持自定义热门key
• 支持搜索历史
• 支持搜索建议
• 支持搜索历史（记录）缓存

效果

使用

＊ 引入

// 模版引入
<import src="/wxSearch/wxSearch.wxml"/>
<template is="wxSearch" data="{{wxSearchData}}"/>
// wxss中引入
@import "/wxSearch/wxSearch.wxss";

＊ 使用

//wxSearch 暴漏的接口

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

//初始化
onLoad: function () {
    console.log('onLoad')
    var that = this
    //初始化的时候渲染wxSearchdata 第二个为你的search高度
    WxSearch.init(that,43,['weappdev','小程序','wxParse','wxSearch','wxNotification']);
    WxSearch.initMindKeys(['weappdev.com','微信小程序开发','微信开发','微信小程序']);
},

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

wxsearch's Issues

IOS和部分安卓机型点击词缀后瞬间消失问题采坑解决方案

点击词缀是调用了keyTap事件，IOS会调用blur事件，所以IOS只要在wxml里把bindblur事件取消就能解决。
安卓部分机型比较复杂，如华为p10，调用keyTap事件后，还会调用input，然后又调用blur事件，上面已经把blur事件取消，但是input事件不可能取消吧。所以想了一个笨办法，在wxSearch.js里增加一个开关变量，var banInput=false;
在wxSearchKeyTap第一行增加banInput = true;
在wxSearchInput第一行增加if (banInput) { banInput = !banInput;return;}
这样就保证keyTap事件后的第一次input事件失效

但同时也带来一个问题，有的机型不会在keyTap后调用input，比如ios。如果这样设置ios在keyTap后的第一次输入会失效
因此又在wxSearchKeyTap里增加一个定时器，setTimeout(()=>{ banInput=false;},200)
200ms后将banInput恢复，用户手速再快，也不至于200ms内去输入吧

综上，问题基本绕的过去。最后感谢作者的贡献，3年前的项目还有这么多人star

在搜索框输入时出现无法输入和无法删除

可能是 因为 聚焦 和 输入框改变时传入的数据是同一个，导致无法输入和无法删除

page/index.js里面的函数名search拼写错误

请问 input 控件如何监听软键盘上的「搜索」键？

如题，谢谢

ios下出现的问题

模拟器测试没问题应为没有弹起键盘，但是在IOS真机下：当输入框获取焦点时，点击下面的热门搜索或者历史记录，无法显示到输入框中，或者是显示进去很快又被替换回来“输入关键字”。望查看一下

控制台提示WxSearch is not defined

官方没给出具体的用法，参考的https://www.jianshu.com/p/5c1fc51bdfc3这篇博文。
进行配置后，在控制台输出
WxSearch is not defined;at pages/index/index page lifeCycleMethod onLoad function
ReferenceError: WxSearch is not defined

在安卓点击的时候input的placeholder会跑出来，再点一下才会回到原位

真机的时候才会，在电脑上没有这种现象
同一个小程序，安卓才有，苹果没这个现象

Bug：wxSearchBlur与其他事件设置数据时的冲突

现象：
在模拟器上正常，在真机上发现点击搜索历史项时搜索栏内容并不改变，或者改变后瞬间变回去。

初步猜想：
当wxSearchKeyTap触发后几乎瞬间，wxSearchBlur触发。后者有设置Data的操作，可能这里的Data是旧的。

安卓bug？

在WxSearch.init时，如果key不是用['weappdev','小程序','wxParse','wxSearch','wxNotification']，而是用对象，在pc上是可以跑通的，数组都能展示出来，但是在安卓上，数组就显示不出来了。

设置isShow无效

设置isShow无效。
原因为：seach.js 第32行init方法 isShow被写死为false