小程序带图标的搜索框，按enter进行功能搜索

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