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

image.png

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

//首页wxml  



 

//首页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

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

  
     
      
    
    搜索 
    
       
         
         {{item.name}}
         ¥ {{item.price}} 
       
    
   
 
<-- 搜索不到商品时的缺省内容 -->
   
       抱歉 试试搜索其他商品吧~ 
  

详情页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;
}