小程序雲開發之模糊搜索功能

項目中遇到一個搜索商品的功能，商品數據是儲存在雲開發中的集合里面的，所以要進行搜索，必須要先對集合進行查詢，話不多說，直接上代碼，

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();
    }
  },

})　

雲開發集合數據結構如下

需要注意的是，商品的信息在數據庫里面的規划問題，這里搜索只能搜索一個集合，如果商品分類比較多的話，建議給不同的商品添加一個專屬字段，方便查詢的時候，多一個查找條件。

如果分開多個集合的話，不知道小程序有沒有連表查詢的功能，因為還沒有用到，所以暫時沒有研究，需要的小伙伴可以百度一下，歡迎把查詢的結果評論分享一波。