云开发之模糊搜索的三种方式

文章目录


前言和数据库

模糊匹配,如图是数据库中的总数据
云开发之模糊搜索的三种方式


1、模糊搜索的三种方式

1.单个字段搜索

使用RegExp方法,红色箭头所指是数据库中的某一条属性,你用哪条属性,匹配的字段则从这条属性中查找。
官方文档中Regexp方法
云开发之模糊搜索的三种方式
获取搜索框的值,由用户所输入来进行查找
云开发之模糊搜索的三种方式
云开发之模糊搜索的三种方式

代码如下(示例):

//单个字段搜索
  handleSingleField() {
    //console.log(this.data.searchValue);
    //使用RegExp方法  此时只能搜索title 返回回来的数据
    db.collection('aozhu').where({
        title: db.RegExp({
          regexp: this.data.searchValue,
          options: 'i'
        })
      }).get()
      .then(res => {
        console.log(res);
      }).catch(err => {
        console.log(err);
      })
  },

输入 澳猪
数据库总数据为

云开发之模糊搜索的三种方式
返回的数据为
云开发之模糊搜索的三种方式

2.多个字段 或 搜索

使用command的or方法 再配合Regexp方法 即可实现,大体和单个字段搜索相似,功能为满足or中的一个条件即可返回
代码如下(示例):

云开发之模糊搜索的三种方式

 //多个字段  或 搜索
  handleMultipleField_or() {
    //使用command的or方法 再配合Regexp方法 
    db.collection('aozhu').where(_.or([{
        title: db.RegExp({
          regexp: this.data.searchValue,
          options: 'i'
        })
      },
      {
        desc: db.RegExp({
          regexp: this.data.searchValue,
          options: 'i'
        })
      }
    ])).get().then(res => {
      console.log(res);
    }).catch(err => {
      console.log(err);
    })
  },

输入 澳猪
数据库总数据为
云开发之模糊搜索的三种方式

返回的数据
云开发之模糊搜索的三种方式

3.多个字段 且 搜索

与 或 搜索写法基本一致,实现功能不同,需要满足 and 方法中的所有限制条件,才会返回相应的数据

(示例):

//多个字段  且  搜索
  handleSingleField_and() {
    //使用command的and方法 再配合Regexp方法 
    db.collection('aozhu').where(_.and([{
        title: db.RegExp({
          regexp: this.data.searchValue,
          options: 'i'
        })
      },
      {
        desc: db.RegExp({
          regexp: this.data.searchValue,
          options: 'i'
        })
      }
    ])).get().then(res => {
      console.log(res);
    }).catch(err => {
      console.log(err);
    })
  }

输入 **澳猪** 数据库中的总数居为 ![在这里插入图片描述](https://www.icode9.com/i/ll/?i=ce0c7af633c74cf890acbb686d2ac868.png?,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LqU6aKc5YWt6Imy55qE5bGB,size_9,color_FFFFFF,t_70,g_se,x_16) 返回的数据 ![在这里插入图片描述](https://www.icode9.com/i/ll/?i=ea3a95e87fb149d1a830fe160cf91bf3.png)

2、完整代码实例

js(示例):

// pages/search/search.js
let db = wx.cloud.database();
let _ = db.command;
Page({

  data: {
    SingleFieldValue: '', //单个字段的数据
    MultipleField_orValue: '', //多个字段或的数据
    MultipleField_andValue: '', //多个字段且的数据
    searchValue: '' //搜索框的值
  },
  onl oad: function (options) {

  },
  handleSearchValue(e) {
    //console.log(e);
    this.setData({
      searchValue: e.detail.value
    })
  },
  //单个字段搜索
  handleSingleField() {
    //console.log(this.data.searchValue);
    //使用RegExp方法  此时只能搜索title 返回回来的数据
    db.collection('aozhu').where({
        title: db.RegExp({
          regexp: this.data.searchValue,
          options: 'i'
        })
      }).get()
      .then(res => {
        console.log(res);
      }).catch(err => {
        console.log(err);
      })
  },
  //多个字段  或 搜索
  handleMultipleField_or() {
    //使用command的or方法 再配合Regexp方法 
    db.collection('aozhu').where(_.or([{
        title: db.RegExp({
          regexp: this.data.searchValue,
          options: 'i'
        })
      },
      {
        desc: db.RegExp({
          regexp: this.data.searchValue,
          options: 'i'
        })
      }
    ])).get().then(res => {
      console.log(res);
    }).catch(err => {
      console.log(err);
    })
  },
  //多个字段  且  搜索
  handleSingleField_and() {
    //使用command的and方法 再配合Regexp方法 
    db.collection('aozhu').where(_.and([{
        title: db.RegExp({
          regexp: this.data.searchValue,
          options: 'i'
        })
      },
      {
        desc: db.RegExp({
          regexp: this.data.searchValue,
          options: 'i'
        })
      }
    ])).get().then(res => {
      console.log(res);
    }).catch(err => {
      console.log(err);
    })
  }
})

wxml(示例):

<input type="text" bindinput="handleSearchValue" style="border: 1px solid #000;"></input>
<button bindtap="handleSingleField">模糊搜索单个字段</button>
<button bindtap="handleMultipleField_or">模糊搜索多个字段(或)</button>
<button bindtap="handleSingleField_and">模糊搜索多个字段(且)</button>

总结

大家可以根据自己想要实现的效果来编辑数据库中的数据。

上一篇:javascript---正则regexp


下一篇:VUE-15 时间戳的使用