快捷導(dǎo)航

微信小程序云開發(fā)實(shí)現(xiàn)搜索功能

更新時(shí)間：2022年05月22日 15:18:29 作者：Bilkan-studio

這篇文章主要為大家詳細(xì)介紹了微信小程序云開發(fā)實(shí)現(xiàn)搜索功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

微信小程序云開發(fā)實(shí)現(xiàn)搜索功能，供大家參考，具體內(nèi)容如下

微信小程序使用云開發(fā)實(shí)現(xiàn)搜索功能有兩種情況，一種是簡(jiǎn)單的搜索用關(guān)鍵字來查詢數(shù)據(jù)，另一種是模糊查詢關(guān)于關(guān)鍵字的全部數(shù)據(jù)查詢。廢話不用多說直接上代碼部分。

簡(jiǎn)單搜索功能實(shí)現(xiàn)

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: '請(qǐng)輸入',
? ? ? ? ? ? ? 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'
? ? ? ? ? ? ? ? })
? ? ? ? ? ? }
? ? ? ? })
? ? },
})

模糊搜索功能實(shí)現(xiàn)

WXML代碼段和WXSS代碼段跟簡(jiǎn)單搜索的一樣，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: '請(qǐng)輸入',
? ? ? ? ? ? ? ? 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'
? ? ? ? ? ? ? ? })
? ? ? ? ? ? }
? ? ? ? })
? ? },
})