微信小程序> 小程序带图标的搜索框,按enter进行功能搜索

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

浏览量:793 时间: 来源:qq_36437172

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

 

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎