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

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

搜索

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'})}})},})