<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: '請(qǐng)輸入',
? ? ? ? ? ? ? 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'
? ? ? ? ? ? ? ? })
? ? ? ? ? ? }
? ? ? ? })
? ? },
})

模糊搜索功能實(shí)現(xiàn)

WXML代碼段和WXSS代碼段跟簡(jiǎn)單搜索的一樣，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: '請(qǐng)輸入',
? ? ? ? ? ? ? ? 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'
? ? ? ? ? ? ? ? })
? ? ? ? ? ? }
? ? ? ? })
? ? },
})