搜索的分类有单字段，多字段（或），多字段（并）搜索等
1.导入数据集
首先向数据库导入免费数据集，这个数据集自己写也行，在导入云数据库即可。
2.单字段搜索
主要部分（js部分）
let db = wx.cloud.database() let _ = db.command Page({ onLoad() { db.collection('news') 单字段模糊搜索 .where({ title: db.RegExp({ //title是你要搜索的字段，可以是其他 regexp: '你好', //匹配内容（title里） options: 'i', //不区分大小写 }) }) .get() .then(res => { console.log('搜索成功', res) }) .catch(res => { console.log('搜索失败', res) }) } })
3.多字段（or）搜索
主要部分（js部分）
let db = wx.cloud.database() let _ = db.command Page({ onLoad() { db.collection('news') //多字段模糊搜索（满足任意一个条件） .where(_.or([{ //搜索标题字段 title: db.RegExp({ regexp: '丽江', options: 'i', }) }, { //搜索描述字段 desc: db.RegExp({ regexp: '丽江', options: 'i', }), } ])) .get() .then(res => { console.log('搜索成功', res) }) .catch(res => { console.log('搜索失败', res) }) } }
4.多字段（and）搜索
主要部分（js部分）
let db = wx.cloud.database() let _ = db.command Page({ onLoad() { db.collection('news') //多字段模糊搜索（满足任意全部条件） .where(_.and([{ //搜索标题字段 title: db.RegExp({ regexp: '小米', options: 'i', }) }, { //搜索描述字段 desc: db.RegExp({ regexp: '小米', options: 'i', }), } ])) .get() .then(res => { console.log('搜索成功', res) }) .catch(res => { console.log('搜索失败', res) }) } })
5.案例
1.编写js部分
// pages/seach-list/seach-list.js let db = wx.cloud.database() let _ = db.command Page({ data: { key: null }, getKey(e){ this.setData({ key: e.detail.value }) }, getSearch() { console.log(this.data.key) let key = this.data.key if (key){ console.log('可以执行搜索！') db.collection('news') .where(_.or([{ //搜索标题字段 title: db.RegExp({ regexp: key, options: 'i', }) }, { //搜索描述字段 desc: db.RegExp({ regexp: key, options: 'i', }), } ])) .get() .then(res => { console.log('搜索成功', res) this.setData({ list: res.data }) }) } else{ wx.showToast({ icon: 'error', title: '请输入内容', }) } }
2.编写wxml部分
<!--pages/seach-list/seach-list.wxml--> <view class="root"> <input placeholder="请输入要搜索的词" bindinput="getKey"></input> <view bindtap="getSearch">搜索</view> </view> <view wx:if="{{list && list.length>0}}"> 搜索结果如下 <view wx:for="{{list}}" wx:key="index"> <view class="item"> <view>标题：{{item.title}}</view> <view>描述：{{item.desc}}</view> </view> </view> </view> <view wx:if="{{list && list.length == 0}}"> 搜索内容为空 </view>
3.编写wxss部分
/* pages/seach-list/seach-list.wxss */ .root{ display: flex; } input{ flex: 1; /*搜索框撑满页面*/ border: 1px solid gray;/*搜索框的颜色*/ border-radius: 30rpx;/*搜索框的边角圆润度*/ margin-right: 30rpx; /*搜索框距离右侧的距离*/ padding-left: 20rpx; /*搜索框中的提示词距左侧的距离*/ } .item{ color:rgb(83, 81, 185); /*颜色*/ margin: 20rpx; /*距离上的距离*/ border-bottom: 1px solid gray; /*底部边框*/ }
感谢大家，点赞，收藏，关注，评论！
