微信小程式雲開發實現搜尋功能

2022-05-22 19:00:18

微信小程式雲開發實現搜尋功能，供大家參考，具體內容如下

微信小程式使用雲開發實現搜尋功能有兩種情況，一種是簡單的搜尋用關鍵字來查詢資料，另一種是模糊查詢關於關鍵字的全部資料查詢。廢話不用多說直接上程式碼部分。

簡單搜尋功能實現

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。

微信小程式雲開發實現搜尋功能

簡單搜尋功能實現

模糊搜尋功能實現

熱門文章