微信小程序搜索功能

时间:2022-06-02 Bilkan-studio 人气:0

微信小程序云开发实现搜索功能，供大家参考，具体内容如下

微信小程序使用云开发实现搜索功能有两种情况，一种是简单的搜索用关键字来查询数据，另一种是模糊查询关于关键字的全部数据查询。废话不用多说直接上代码部分。

简单搜索功能实现

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

加载全部内容