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

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

简单搜索功能实现

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。