第62讲商品搜索动态实现以及性能优化

商品搜索后端动态获取数据

后端动态获取数据：

    /**
     * 商品搜索
     * @param q
     * @return
     */
    @GetMapping("/search")
    public R search(String q){
        List<Product> productList = productService.list(new QueryWrapper<Product>().like("name", q));
        Map<String,Object> map=new HashMap<>();
        map.put("message",productList);
        return R.ok(map);
    }

定义productList

    /**
     * 页面的初始数据
     */
    data: {
      productList:[], // 商品数组
      inputValue:"", // 输入框的值
      isFocus:false // 取消 按钮 是否显示
    },

前端调用

  /**
   * 请求后端 商品搜索
   */
  async search(q){
    const result = await requestUtil({
      url: '/product/search',
      data:{q}
    });
    this.setData({
      productList: result.productList
    })
  },

    // 处理input事件
    handleInput(e){
      const {value}=e.detail;
      if(!value.trim()){
        this.setData({
          productList:[],
          isFocus:false
        })
        return;
      }
      this.setData({
        isFocus:true
      })
      clearTimeout(this.TimeoutId);
      this.TimeoutId=setTimeout(()=>{
        this.search(value)
      },1000)
     
    },

页面渲染：

<view class="search_row">
  <input type="text" model:value="{{inputValue}}" placeholder="请输入商品关键字" bindinput="handleInput"/>
  <button hidden="{{!isFocus}}">取消</button>
</view>
<view class="search_content">
  <navigator
    class="search_item"
    wx:for="{{productList}}"
    wx:key="id"
    url="/pages/product_detail/index?id={{item.id}}"
  >
  {{item.name}}
  </navigator>
</view>

样式：

page{
  background-color: #F9F9F9;
  padding-top: 20rpx;
}

.search_row{
  height: 50rpx;
  display: flex;
  input{
    background-color: #FFFFFF;
    flex:1;
    height: 100%;
    padding-left: 30rpx;
  }
  button{
    display:flex;
    justify-content: center;
    align-items: center;
    width:110rpx !important;
    font-size: 26rpx;
    padding: 0;
    margin: 0 10rpx;
    height: 100%;
  }
}

.search_content{
  margin-top: 15rpx;
  padding: 0px;
  .search_item{
    background-color: #FFFFFF;
    font-size: 26rpx;
    padding: 15rpx;
    align-items: center;
    border-bottom: 1rpx solid #EAEAEA;

    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

取消按钮：

<view class="search_row">
  <input type="text" model:value="{{inputValue}}" placeholder="请输入商品关键字" bindinput="handleInput"/>
  <button hidden="{{!isFocus}}">取消</button>
</view>

  // 点击 取消按钮
  handleCancel(){
    this.setData({
      productList:[], // 商品数组
      isFocus:false, // 取消 按钮 是否显示
      inputValue:"" // 输入框的值
    })
  },

搜索性能优化

搞个定时器

// 处理input事件
    handleInput(e){
      const {value}=e.detail;
      if(!value.trim()){
        this.setData({
          productList:[],
          isFocus:false
        })
        return;
      }
      this.setData({
        isFocus:true
      })
      clearTimeout(this.TimeoutId);
      this.TimeoutId=setTimeout(()=>{
        this.search(value)
      },1000)
     
    },