• 小程序云开发之模糊搜索功能


    项目中遇到一个搜索商品的功能,商品数据是储存在云开发中的集合里面的,所以要进行搜索,必须要先对集合进行查询,话不多说,直接上代码,

    wxml

    <view class="container">
      <view class="search">
        <view class="search_input">
          <input class="search_input2" placeholder='搜索商品' value='{{searchVal}}' bindconfirm="search" bindinput="input"></input>
          <image class="search_clear"  wx:if="{{ searchVal != '' }}" catchtap="clear" src="../../images/clear.png"></image>
        </view>
        <image class="search_image" src="../../images/search_.png" catchtap="search"></image>
      </view>
      <scroll-view class="search_scroll" scroll-y="true">
          <view class="search_kuangjia"> 
            <view class="search_items" wx:for="{{goodList}}" wx:key="index" wx:for-item='item'>
              <view>
                <image class="search_images" src="{{goodList[index].img_url}}"></image>
              </view>
              <view class="wenzi">
                <view>{{goodList[index].contents}}</view>
                <text class="contnet">{{goodList[index].content}}</text>
                <view class="rmb">¥{{goodList[index].price}}元</view>
                <view class="cart">+购物车</view>
              </view>
            </view>
          </view>
      </scroll-view>
    </view>
    

    wxss

    page{
      background: #f5f5f5;
    }
    .container {
      position: relative;
       100%;
      height: 100vh;
      background-color: #fff;
      color: #939393;
    }
    .search{
       100%;
      height: 10vh;
      background: #f5f5f5;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
    .search_input{
      position:relative;
       85%;
      height: 5vh;
      background-color: white;
      border: 1px solid #dedede;
    }
    .search_input2{
       90%;
      color: black;
    }
    .search_clear{
      position: absolute;
      top: 0;
      right: 5rpx;
       50rpx;
      height: 50rpx;
    }
    .search_image{
       50rpx;
      height: 50rpx;
    }
    .search_scroll{
       100%;
      height: 90vh;
    }
    .search_kuangjia{
       100%;
      padding: 3%;
    }
    .search_items{
      border-radius: 2%;
      overflow: hidden;
       94%;
      height: 250rpx;
      background-color: forestgreen;
      margin-bottom: 20rpx;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
    .search_images{
      height: 250rpx;
       250rpx;
    }
    .wenzi{
       65%;
      position: relative;
      font-size: 50rpx;
      background-color: rgb(224, 222, 224);
      height: 250rpx;
      color: black;
      text-align: center;
    }
    .contnet{
    
      height: 80rpx;
      font-size: 30rpx;
      padding-right: 30rpx;
      padding-left: 30rpx;
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      word-wrap: break-word;
      white-space: normal !important;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .rmb{
      color: red;
      position: absolute;
      bottom: 10rpx;
      left: 0;
      font-size: 40rpx;
    }
    .cart{
      color: blue;
      position: absolute;
      bottom: 10rpx;
      right: 0;
      font-size: 40rpx;
    }
    

    js

    const db = wx.cloud.database();//初始化数据库
    Page({
      data: {
        //定义一个空字符串 要搜索的字符
        searchVal: "",
        //搜索过后商品列表 
        goodList: []
      },
      //通过inputTap方法获取输入值
      input(even) {
        //把输入的值设置为要搜索的字符
        this.setData({
          searchVal: even.detail.value
        })
        //console.log(searchVal)
      },
      //当输入框不为空的时候 显示可清除输入图片
      clear: function () {
        this.setData({
          searchVal: ""
        })
      },
      //商品关键字模糊搜索
      search: function () {
        wx: wx.showLoading({
          title: '加载中',
          mask: true,
          success: function (res) { },
          fail: function (res) { },
          complete: function (res) { },
        })
        //重新给数组赋值为空
        this.setData({
          goodList: []
        })
        // 数据库正则对象
        db.collection('plant').where({
          contents: db.RegExp({
            regexp: this.data.searchVal,//做为关键字进行匹配
            options: 'i',//不区分大小写
          })
        })
          .get().then(res => {
            console.log(res.data)
            for (var i = 0; i < res.data.length; i++) {
              var contents = "goodList[" + i + "].contents"
              var id = "goodList[" + i + "].id"
              var img_url = "goodList[" + i + "].img_url"
              var price = "goodList[" + i + "].price"
              var buy_num = "goodList[" + i + "].buy_num"
              this.setData({
                [contents]: res.data[i].contents,
                [id]: res.data[i]._id,
                [img_url]: res.data[i].img_url,
                [price]: res.data[i].price,
                [buy_num]: res.data[i].buy_num,
              })
              //console.log(this.data.goodList[i].contents)
              wx.hideLoading();
            }
          }).catch(err => {
            console.error(err)
            wx.hideLoading();
          })
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        var that = this
        //输出其他页面传来的值
        //console.log(options.searchVal)
        if (this.data.searchVal != ' ') {
          //console.log(searchVal)
          this.setData({
            searchVal: that.data.searchVal
          })
          this.search();
        } else {
          console.log("为空")
          //that.search();
        }
      },
    
    }) 

    云开发集合数据结构如下

    需要注意的是,商品的信息在数据库里面的规划问题,这里搜索只能搜索一个集合,如果商品分类比较多的话,建议给不同的商品添加一个专属字段,方便查询的时候,多一个查找条件。

    如果分开多个集合的话,不知道小程序有没有连表查询的功能,因为还没有用到,所以暂时没有研究,需要的小伙伴可以百度一下,欢迎把查询的结果评论分享一波。  

  • 相关阅读:
    sharding-jdbc精确分片配置
    sharding-jdbc注意事项
    sharding-jdbc绑定表和公共表
    go 语言解析yaml文件作为配置文件
    go语言添加全局的json配置文件
    go查询数据库讲单数据结果绑定结构体
    sharding-jdbc分库分表节点路由
    增强for循环对遍历的集合进行增删改操作会出现并发修改异常
    go语言数据模型改变响应给前端字段名
    视图
  • 原文地址:https://www.cnblogs.com/jzbs/p/12628644.html
Copyright © 2020-2023  润新知