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

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

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

简单搜索功能实现

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持云海天教程。

原文地址:https://blog.csdn.net/weixin_45432648/article/details/122227775