微信小程序云開發(fā)實現(xiàn)搜索功能

第微信小程序云開發(fā)實現(xiàn)搜索功能微信小程序云開發(fā)實現(xiàn)搜索功能，供大家參考，具體內(nèi)容如下

微信小程序使用云開發(fā)實現(xiàn)搜索功能有兩種情況，一種是簡單的搜索用關鍵字來查詢數(shù)據(jù)，另一種是模糊查詢關于關鍵字的全部數(shù)據(jù)查詢。廢話不用多說直接上代碼部分。

簡單搜索功能實現(xiàn)

WXML代碼段

view

view

view

inputtype="text"placeholder="搜索"value=""bindinput="GetSearchInput"/input

/view

viewbindtap="ToSearch"

text搜索/text

icontype="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;

.shurukuanginput{

width:90%;

height:100%;

font-size:32rpx;

.sousuo_anniu{

width:20%;

height:64rpx;

display:flex;

align-items:center;

justify-content:center;

.sousuo_anniutext{

font-size:30rpx;

}

JavaScript代碼段

constdb=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'

})

}

})

},

})

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

WXML代碼段和WXSS代碼段跟簡單搜索的一樣，JavaScript代碼段如下

Javascript代碼段

constdb=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({