小程序关键字搜索功能（按钮搜索和回车搜索）

image.png

首先是从首页的搜索栏跳转到搜索页面

//首页wxml  

<view class='searchBar' bindtap='search' >
<icon class='iconfont icon-search-1-copy'></icon>
<input type='text' class='search' placeholder='搜索商品'></input> </view>

//首页js实现页面跳转，跳转到商品详情页

search: function(e){
// var id = e.currentTarget.dataset.id;
wx.navigateTo({
 url: '../../pages/search/search',
 })
} 

//首页wxss
.searchBar{
  margin: 10rpx 30rpx;
  display: flex;
  align-items: center;
  position: relative;
  height: 70rpx;
}
.searchBar .search{
  height:70rpx;
  border-radius:20rpx;
  background-color:#e9e8ee;
  /* opacity:0.6; */
  padding-left:80rpx;
  width: 100%;
}
.searchBar icon{
  position: absolute;
  z-index:2;
  left:20rpx;
  color: #999;
  line-height: 70rpx;
}

image.png

样式没详写 大概看下
搜索详情页面

<view class="serach_a">
  <view class='searchBar'>
     <icon class='iconfont icon-search-1-copy'></icon>
     <!-- 回车搜索    bindconfirm="searchSubmit"   可查看微信官方文档API --> 
    <input type='text' class='search' placeholder='搜索商品' value="{{search_txt}}" 
    bindinput='getSearch_txt' bindconfirm="searchSubmit" ></input>
    <button formType="submit" class="search_btn" bindtap="searchSubmit">搜索</button> </view><view class='indexGoods' wx:key="{{index}}">
    <view class='goods'>
       <view class='goodsList' wx:for="{{list}}" wx:key="{{index}}" bindtap="" data-id="{{item.id}}">
         <image class='goodsPic' src="{{item.imgurl}}"></image>
        <view class='goodsListMsg'> <view class='goodsListName'>{{item.name}}</view>
        <view class='goodsListPirce'> <text class='price'>¥ {{item.price}}</text></view> 
       </view>
    </view>
   </view>
 </view>
<-- 搜索不到商品时的缺省内容 -->
  <view wx:if = "{{hasList == 1}}"> 
       <view class="list_none">抱歉 试试搜索其他商品吧~</view> 
  </view>
</view>

详情页js

data: {
    list:[  ],
    name:"",
    pageSize:"",
    pageNum:"",
    search_txt:"",
    hasList: 0
  },

getSearch_txt: function(e) {
    this.setData({
      search_txt: e.detail.value
    })
    console.log('搜索框里面的值' + e.detail.value)
  },

  searchSubmit: function(options) {
    var that = this;
    var search_txt = that.data.search_txt;
    console.log(11)
    console.log(search_txt)
    wx.request({   
      url: ''//请求的接口
      method: 'post',
      data: {name: search_txt,pageNum: 1,pageSize:1},
      header: {
        'content-type': 'application/json' // 默认值
      },

      success: function(res) {
        console.log(res)
        that.setData({
          //  list:res.data.data
          list:res.data.data.list
        })
        console.log(res.data.data.length)//没有商品时提示信息
        if (res.data.data.list.length == 0) {
          that.setData({
            hasList: 1
          })
        } else {
          // console.log('123')
          that.setData({
            // list: data,
            selectAllStatus: false,
            hasList: 0,
            show_edit: true
          })
        }
      }
    })
  },

详情页wxss

.searchBar{
  /* margin: 20rpx 30rpx; */
  margin: 20rpx 30rpx 0rpx 30rpx;
  display: flex;
  align-items: center;
  position: relative;
  height: 70rpx;
}
.searchBar .search{
  height:70rpx;
  border-radius:20rpx;
  background-color:#e9e8ee;
  /* opacity:0.6; */
  padding-left:80rpx;
  width: 100%;
}
.searchBar .search_btn{
  margin-left: 5px;
  width: 25%;
  height: 75rpx;
  font-size:32rpx;
  background: #56b273;
  color: #fff;
  border-radius: 20rpx;
  padding: 0;
  line-height: 70rpx;
}
.searchBar icon{
  position: absolute;
  z-index:2;
  left:20rpx;
  color: #999;
  line-height: 70rpx;
}