小程序 搜索页面 完整功能

 

 

<view class="search_row">

    <input value="{{inputValue}}" placeholder="请输入你要搜索的商品" bindinput="handleInput"> </input>

    <button class="search_btn" bindtap="handleCancel" hidden="{{!isFocus}}"> 取消 </button> 

</view>

 

  <view class="search_content">

      <navigator  

        class="search_item"

        wx:for="{{goods}}"

        wx:key="goods_id"  

        url="/pages/goods_detail/index?goods_id={{item.goods_id}}"

      >{{item.goods_name}}</navigator>  

  </view>

    

/* pages/search/index.wxss */

page{

  background-color: #dedede;

  padding: 20rpx;

}

.search_row{

  height: 60rpx;

  display: flex;

  input{

    background-color: #fff;

    flex: 1;

    height: 100%;

    padding-left: 30rpx;

  }

  .search_btn{

    width: 110rpx !important;

    height: 100% !important;

    line-height:  100% !important; 

    padding:  0  !important;

    margin: 0 10rpx !important;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 26rpx;

  }

}

.search_content{

  margin-top: 30rpx;

  .search_item{

    background-color: #fff; 

    font-size: 26rpx;

    padding: 15rpx 10rpx;

    border-bottom: 1px solid #ccc;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

  }

}

 

  /**

   * 页面的初始数据

   */

  data: {

    goods:[],

    // 取消 按钮 是否显示

    isFocus: false,

    inputValue:''

  },

  TimeId:-1,

  // 输入框的值改变 就会触发的事件

  handleInput(e){

    // console.log(e)

    // 1 获取输入框的值

    const {value} = e.detail;

    // 检测合法性

    if(!value.trim()){

      this.setData({

        goods:[],

        isFocus:false

      })

      // 值不合法  

      return ;

    }

    // 3 准备发送请求 获取数据

    this.setData({

      isFocus:true

    })

    clearTimeout(this.TimeId);

    // 4 防抖实现

    this.TimeId = setTimeout(()=>{

      this.qsearch(value);

    },1000)

   

  },

  // 发送请求 获取搜索建议的数据

  async qsearch(query){

    const res = await request({

      url:'/goods/qsearch',

      data:{query}

    }); 

    // console.log(res)

    this.setData({

      goods:res

    })

  },

  // 点击取消按钮

  handleCancel(){

    this.setData({

      inputValue:'',

      isFocus:false,

      goods:[]

    })

  },