微信小程序如何实现搜索框功能 微信小程序实现搜索框功能代码示例

微信小程序如何实现搜索框功能？本篇文章小编给大家分享一下微信小程序实现搜索框功能代码示例，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

先上代码：

wxml:

 搜索商品
 
  

  
  
  
  搜索
  
  
  

效果：

上面两张图片分别是搜索框的两种状态，非搜索状态和搜索状态，样式很简单，逻辑也不复杂，但是小程序的搜索和网页的不一样，网页可以直接添加点击事件但是，小程序不行，因为小程序的搜索和输入分开，如果使用data-的话无疑会产生很多多余的代码，庆幸的是小程序提供了form可以整合搜索和输入。

①搜索和重置必须使用按钮，因为要使用button的formType。

②搜索事件和重置事件是绑定到form上的，而不是button。

③input必须添加一个name属性，例如name=”search-input”，否则你是用e.detail.value是取不到值的

④confirm-type='search'是控制你的软键盘的右下角显示的文字

⑤到目前为止你的搜索按钮可以正常使用，但是点击的软键盘的搜索按钮，没有任何效果，如果想要软键盘的搜索按钮同样可以使用，首先在输入框中添加indconfirm=”inputSearch”事件，然后测试你会发现，现在依然无法使用，但是却使用了函数，这是因为当你使用软键盘进行搜索时，获取的值的方式是e.detail.value就可以而不是e.detail.value‘search-input',所以你需要修改一下你的搜索函数：

inputSearch: function (e) { //输入框根据查询条件搜索点击事件
 // 获取用户输入框中的值
 let inputVaue = e.detail.value['search-input'] ? e.detail.value['search-input'] : e.detail.value;
 if (!inputVaue) {
  throw new Error('search input contents con not empty!');
  return ;
 }
 let searchUrl = "/product/index?keyword=" + inputVaue + "&fromindex=true";
 this.converterUrlAndRedirect(searchUrl);
 }

注意：

let inputVaue = e.detail.value[‘search-input'] ? e.detail.value[‘search-input'] : e.detail.value;

现在你的小程序搜索框可以使用了。

另外有一个布局问题，ios的小程序对position: fixed;很不友好，所有尽量使用position: absolute;代替它