微信小程序云开发实现搜索功能
时间：2022-06-18 12:38:45 | 栏目：JavaScript代码 | 点击：次
微信小程序云开发实现搜索功能，供大家参考，具体内容如下
微信小程序使用云开发实现搜索功能有两种情况，一种是简单的搜索用关键字来查询数据，另一种是模糊查询关于关键字的全部数据查询。废话不用多说直接上代码部分。
简单搜索功能实现
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'
})
}
})
},
})
