云开发（微信-小程序）笔记（十二）---- 搜索

云开发（微信-小程序）笔记（十一）---- 分页，不简单啊

搜索的分类有单字段，多字段（或），多字段（并）搜索等

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; /*底部边框*/
}

云开发（微信-小程序）笔记（十三）---- 注册登陆

感谢大家，点赞，收藏，关注，评论！