微信小程序云开发实现搜索功能

微信小程序云开发实现搜索功能，供大家参考，具体内容如下

微信小程序使用云开发实现搜索功能有两种情况，一种是简单的搜索用关键字来查询数据，另一种是模糊查询关于关键字的全部数据查询。废话不用多说直接上代码部分。

简单搜索功能实现

WXML代码段

<view class="sousuokuang">
  <view class="sousuo">
    <view class="shurukuang">
      <input type="text" placeholder="搜索" value="" bindinput="GetSearchInput"></input>
    </view>
    <view class="sousuo_anniu" bindtap="ToSearch">
      <text>搜索</text>
      <icon type="search" size="20"></icon>
    </view>
  </view>
</view>

WXSS代码段

.sousuokuang {
  width: 100%;
  height: 100rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: white;
}
.sousuo {
  width: 92%;
  height: 100rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-items: center;
}
.shurukuang {
  width: 80%;
  height: 64rpx;
  border-radius: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f6f6f6;
}
.shurukuang input {
  width: 90%;
  height: 100%;
  font-size: 32rpx;
}
.sousuo_anniu {
  width: 20%;
  height: 64rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sousuo_anniu text {
  font-size: 30rpx;
}

JavaScript代码段

const db = wx.cloud.database()
Page({
  data: {
    search: ''
  },
  onLoad: function (options) {

  },
  GetSearchInput: function(e) {
    this.setData({
      search: e.detail.value
    })
  },
  ToSearch: function(e) {
    if(this.data.search == '') {
      wx.showToast({
       title: '请输入',
       icon: 'none'
      })
      return
    }
    db.collection('输入你查询的表名').where({
      name: this.data.search
    }).get().then(res => {
      if(res.data.length != 0) {
        this.setData({
          shangpinbiao: res.data
        })
      }else {
        wx.showToast({
         title: '未找到商品',
         icon: 'none'
        })
      }
    })
  },
})

模糊搜索功能实现

WXML代码段和WXSS代码段跟简单搜索的一样，JavaScript代码段如下

Javascript代码段

const db = wx.cloud.database()
Page({
  data: {
    search: ''
  },
  onLoad: function (options) {

  },
  GetSearchInput: function (e) {
    this.setData({
      search: e.detail.value
    })
  },
  ToSearch: function (e) {
    if (this.data.search == '') {
      wx.showToast({
        title: '请输入',
        icon: 'none'
      })
      return
    }
    db.collection('输入你查询的表名').where({
      name: db.RegExp({
        regexp: this.data.search,
        options: 'i',
      }),
    }).get().then(res => {
      if (res.data.length != 0) {
        this.setData({
          shangpinbiao: res.data
        })
      } else {
        wx.showToast({
          title: '未找到',
          icon: 'none'
        })
      }
    })
  },
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持源码搜藏网。