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

本篇内容介绍了“微信小程序云开发怎么实现搜索功能”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

简单搜索功能实现

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

“微信小程序云开发怎么实现搜索功能”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！