微信小程序雲開發實現搜索功能
微信小程序雲開發實現搜索功能，供大傢參考，具體內容如下
微信小程序使用雲開發實現搜索功能有兩種情況，一種是簡單的搜索用關鍵字來查詢數據，另一種是模糊查詢關於關鍵字的全部數據查詢。廢話不用多說直接上代碼部分。
簡單搜索功能實現
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'
})
}
})
},
})
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。