这里主要说的是输入关键字进行搜索。之前页面设计搜索框都带有搜索按钮进行搜索,没有用过 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" />
</view>
input:
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
}
},