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

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

简单搜索功能实现

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

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