这里主要说的是输入关键字进行搜索。之前页面设计搜索框都带有搜索按钮进行搜索,没有用过 enter 进行搜索的路过,原谅我不知道还有这个功能。这里主要介绍 不带搜索按钮的输入框,通过点击 enter 间进行搜索。
HTML:
view class="df search_arr" icon class="searchcion" size='16' type='search'/icon input class="input" placeholder-class="place-holder" placeholder="请输入商品或门店" bindinput='listenerSearchInput' bindconfirm="toSearch" //viewinput:
placeholder-class:指定 placeholder 的样式类
bindinput:键盘输入时触发,event.detail = {value, cursor, keyCode},监听输入框中的内容
bindconfirm: 点击完成按钮时触发,event.detail = {value: value}, 即为回车事件,为它绑定上需要触发的事件(toSearch)。
具体查看小程序文档input组件
JS:
// 监听输入框内容 listenerSearchInput: function (e) { var searchInput = e.detail.value; this.setData({ searchInput: searchInput }) }, // 点击搜索 toSearch: function (sta) { var that = this if (that.data.searchInput) { wx.request({ url: 'XXXXX', data: {}, success: function (res) { console.log('success!!!') }, fail: function () { console.log('failed!!!') } }) } else { wx.showModal({ title: '提示', content: '请输入搜索内容', showCancel: false }) return } },













