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

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

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;
  width: 100%;
  height: 100vh;
  background-color: #fff;
  color: #939393;
}
.search{
  width: 100%;
  height: 10vh;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.search_input{
  position:relative;
  width: 85%;
  height: 5vh;
  background-color: white;
  border: 1px solid #dedede;
}
.search_input2{
  width: 90%;
  color: black;
}
.search_clear{
  position: absolute;
  top: 0;
  right: 5rpx;
  width: 50rpx;
  height: 50rpx;
}
.search_image{
  width: 50rpx;
  height: 50rpx;
}
.search_scroll{
  width: 100%;
  height: 90vh;
}
.search_kuangjia{
  width: 100%;
  padding: 3%;
}
.search_items{
  border-radius: 2%;
  overflow: hidden;
  width: 94%;
  height: 250rpx;
  background-color: forestgreen;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.search_images{
  height: 250rpx;
  width: 250rpx;
}
.wenzi{
  width: 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();
    }
  },

})　

云开发集合数据结构如下

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

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