精华内容
下载资源
问答
  • 我这里后台数据库用的是小程序云开发的云数据库。所以我们搜索的时候就要借助云开发来实现。 一,需求 比如我这里有如下的一些数据 我们想实现如下搜索需求 1,搜索标题(title)包含‘小石头’的数据 2,搜索标题...

    今天来给大家讲讲小程序的搜索功能。我这里后台数据库用的是小程序云开发的云数据库。所以我们搜索的时候就要借助云开发来实现。

    一,需求

    比如我这里有如下的一些数据

    我们想实现如下搜索需求

    • 1,搜索标题(title)包含‘小石头’的数据
    • 2,搜索标题(title)或者描述(desc)包含‘小石头’的数据
    • 3,搜索标题(title)描述(desc)都包含‘小石头’的数据

    我们知道数据库查询的时候有个where语句,但是where语句是查询某个字段全部包含你输入的内容时才可以,所以单纯用where语句来做搜索的话,结果太单一。所以我们今天就来学习下模糊搜索功能的实现。我们以上面三个需求为例,来一个个讲解。

    二,实现原理

    我们做模糊搜索的时候,其实就是查询某个字段里是否包含我们的搜索词。而模糊搜索需要借助RegExp,来看看RegExp是什么。

    官方文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/Database.RegExp.html

    • 再来看看官方示例

      可能看官方示例会有点糊涂,那么我们接下来就结合具体代码来给大家做下讲解。

    三,模糊搜索的代码实现

    3-1,模糊搜索单个字段

    • 需求:搜索标题(title)包含‘小石头’的数据

    代码如下

    查询结果如下:

    可以看到我们成功的查询到了标题里包含‘小石头的数据’

    3-2,模糊搜索多个字段(满足一个即可)

    • 需求:搜索标题(title)或者描述(desc)包含‘小石头’的数据

    由于我们要查询多个字段,所以我们这里用到了command高级操作符里的or

    代码如下:

    查询结果:

    我们来分析下这两条数据

    • 1,标题和描述都包含‘小石头’,符合
    • 2,虽然标题里没有‘小石头’,但是描述里有,所以也符合。
    • 3,title和desc里都没有‘小石头’,所以不符合。

    3-3,模糊搜索多个字段(要同时满足)

    • 需求:搜索标题(title)描述(desc)都包含‘小石头’的数据

    由于我们要查询多个字段,所以我们这里用到了command高级操作符里的and

    代码如下:

    查询结果:

    我们来分析下这两条数据

    • 1,标题和描述都包含‘小石头’,符合
    • 2,虽然desc里没有‘小石头’,但是title里没有,所以也不符合。
    • 3,title和desc里都没有‘小石头’,所以也不符合。

    四,源码

    为例方便大家使用,我把完整的代码贴到这里,后面大家使用时,直接复制这里的代码,略微改造下就可以了。

        //我这里简单起见就把搜索词写死,正常应该用户输入的
        let searchKey = '小石头'
        let db = wx.cloud.database()
        let _ = db.command
    
        db.collection('news')
          .where(_.or([
            {//标题
              title: db.RegExp({ //使用正则查询,实现对搜索的模糊查询
                regexp: searchKey,
                options: 'i', //大小写不区分
              }),
            },
            {//描述
              desc: db.RegExp({
                regexp: searchKey,
                options: 'i',
              }),
            }
          ])).get()
          .then(res => {
            console.log('查询成功', res)
          })
          .catch(res => {
            console.log('查询失败', res)
          })
    

    到这里就讲完了,我后面会专门在云开发入门的课程里作为实战案例录制视频给到大家的:
    https://edu.csdn.net/course/detail/26572

    展开全文
  • //连接数据库 const db = wx.cloud.database() var that = this db.collection('book').where({ //使用正则查询,实现对搜索模糊查询 name: db.RegExp({ regexp: e.detail.value, //从搜索栏中获取的value作为...

    这是效果图:在这里插入图片描述在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    话不多说,上代码,js、wxml采用的是weui里的模板
    js:

    
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        inputVal: '',
        inputShowed: false,
        search_list1: [],
      },
      showInput: function () {
        this.setData({
          inputShowed: true
        });
      },
      hideInput: function () {
        this.setData({
          inputVal: "",
          inputShowed: false
        });
      },
      clearInput: function () {
        this.setData({
          inputVal: ""
        });
      },
      inputTyping: function (e) {
        this.setData({
          inputVal: e.detail.value
        });
        //连接数据库
        const db = wx.cloud.database()
        var that = this
        db.collection('book').where({
          //使用正则查询,实现对搜索的模糊查询
          name: db.RegExp({
            regexp: e.detail.value,
            //从搜索栏中获取的value作为规则进行匹配。
            options: 'i',
            //大小写不区分
          }),
          
        }).limit(10).get({
          success: res => {
            console.log(res)
            that.setData({
              search_list1: res.data
            })
          }
        })
      }
      })
    

    wxml:

    <view class="page">
      <view class="page__bd">
        <view class="weui-search-bar">
          <view class="weui-search-bar__form">
            <view class="weui-search-bar__box">
              <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
              <input type="text" class="weui-search-bar__input" placeholder="搜索" value="{{inputVal}}" focus="{{inputShowed}}" bindinput="inputTyping" />
              <view class="weui-icon-clear" wx:if="{{inputVal.length > 0}}" bindtap="clearInput">
                <icon type="clear" size="14"></icon>
              </view>
            </view>
            <label class="weui-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput">
              <icon class="weui-icon-search" type="search" size="14"></icon>
              <view class="weui-search-bar__text">搜索</view>
            </label>
          </view>
          <view class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="hideInput">取消</view>
        </view>
        <view class="weui-cells searchbar-result" wx:if="{{inputVal.length > 0}}" wx:for="{{search_list1}}">
          <navigator url="./book?whatbook={{item.sx}}" class="weui-cell" hover-class="weui-cell_active">
            <view class="weui-cell__bd">
              <view>书本名:{{item.name}}</view>
            </view>
          </navigator>
        </view>
      </view>
    </view>
    
    展开全文
  • 小程序云开发模糊查询

    万次阅读 多人点赞 2019-03-18 21:27:49
    小程序云开发模糊查询 尝试小程序云开发的时候发现小程序不能模糊查询,搜索得到如下办法; const db = wx.cloud.database(); //初始化数据库 db.collection("all").where({ // name: _name, name:{ $regex:'...

    小程序云开发模糊查询

    尝试小程序云开发的时候发现小程序不能模糊查询,搜索得到如下办法;

    const db = wx.cloud.database(); //初始化数据库
       db.collection("all").where({
          // name: _name,
          name:{
            $regex:'.*'+ 模糊匹配的值,
            $options: 'i'
          }
        }).get({
    
        });
    //这个查询就是查询all表中 字段为name中 like你传的值的所有数据
    //后面的$options:'i' 代表这个like的条件不区分大小写
    
    //这个模糊查询基本够用了;

     

    展开全文
  • 微信小程序云开发模糊搜索

    千次阅读 2020-10-24 17:28:42
    以前在做前后端分离的项目时,要实现一些搜索框的模糊搜索时,运气好一点,后端攻城狮会处理好逻辑,前端只需在输入框的value值发生变化时去调用接口重新渲染...微信小程序云开发模糊搜索 可以重下面的例子看到 ...

    以前在做前后端分离的项目时,要实现一些搜索框的模糊搜索时,运气好一点,后端攻城狮会处理好逻辑,前端只需在输入框的value值发生变化时去调用接口重新渲染数据就好了。运气差点,后端攻城狮只会给你一个总的数组,然后在值发生变化时得自己动手写逻辑去筛选数据。那么在微信小程序云开发上是怎么实现的了?

    微信小程序云开发之模糊搜索

    好的,我们先来开看一下我录制的一个小demo,在使用代码前我们需要注意一些细节。当我们直接用api去匹配数据库时一定要注意数据库操作权限的问题,否则不管匹配什么返回都是空的,如果是间接通过云函数去操作的话就不会有这种问题,具体看gif。

    在这里插入图片描述


    主要代码

    要实现模糊搜索的话直接使用构造正则表达式就好了。

    ☞官方文档API:Database.RegExp

    ❀直接用api调用(需要数据库操作权限,会有限制20条的局限)

      // 直接调用
      //msg为要搜索的集合,可以自己定义
      db.collection('msg').where({
        //text为要搜索的对象名,务必对应集合里面的名字
        text: db.RegExp({
          //inputValue为输入框的值,也是就要查询内容,可以自己定义
          regexp: inputValue,
          //大小写不区分
          options: 'i',
        })
      }).get().then(res => {
        console.log(res)
      })
    

    ❀通过云函数调用

    /*------------------------小程序端代码---------------------------*/
    //fuzzySearch为云函数的名字,可以自己定义
      wx.cloud.callFunction({
        name: 'fuzzySearch',
        data: {
          inputValue: inputValue
        }
      }).then(res => {
        // console.log(res)
        this.setData({
          resultArr: res.result.data
        })
      })
    
    /*------------------------云函数端代码---------------------------*/
    // 云函数入口文件
    const cloud = require('wx-server-sdk')
    
    cloud.init()
    
    const db = cloud.database()
    
    // 云函数入口函数
    exports.main = async (event, context) => {
      //输入框的值
      let inputValue = event.inputValue;
      return await db.collection('msg').where({
        //text为要搜索的对象名,务必对应集合里面的名字
        text: db.RegExp({
          //从搜索栏中获取的value作为规则进行匹配。
          regexp: inputValue,
          //大小写不区分
          options: 'i',
    
        })
      }).get()
    }
    

    需要源代码的可以点这下载,把代码拷贝到你项目的对应位置,记得上传云函数,另外在你的云数据库中创建相应集合,这样基本就没问题了==》百度网盘 ——提取码6w4m

    拷贝代码或者下载demo后报错的看这里,务必认真看完文章描述及录制的gif,检查自己创建的集合名字、搜索字段名是否对应得上,检查数据库的权限问题,最后别忘了上传云函数,都学云开发了,务必认真、细心,别拷了代码还不会用。 (╯°Д°)╯︵┻━┻


    最后想学补习云函数的可以点击这里哦!! 传送门

    展开全文
  • 代码说明:模糊查询数据库集合(birthday),模糊匹配查询生日是否为今天 用户的生日日期格式为 1994-07-06 , 当前日期格式为 07-06 , 匹配数据库的月和日,数据库集合如图: 函数代码: // 函数入口...
  • 最近做小程序云开发时,用到了一个数据库的模糊搜索功能,并且是要求多字段的模糊搜索。 网上也有一大堆资源,但是都是单个字段的搜索。如下图 上图只可以实现time字段的模糊搜索。但是我们如果相对数据表里的多个...
  • 最近微信小程序需要做个搜索的功能,但是微信小程序云开发中的数据库的查询语句中没有模糊查询这个功能【小声BB:真垃圾】,神奇的是有正则表达式这个功能,正则表达式提供以下方法 wx.cloud.init() var that=...
  • 比如想要在数据库中查找Java 相关书籍, 输入java ,书名中有JAVA,xxxjavaxxx,...但是小程序没有提供这种模糊搜索的封装,请问怎么实现 全部查询下来再提取的方式就不要说了,数据量没那么小。
  • 微信小程序模糊搜索功能(云开发

    千次阅读 多人点赞 2019-07-29 13:40:22
    在此我对微信云开发模糊搜索进行了研究。搜索功能基本就是通过输入关键字查询与之相匹配的内容,并展示在页面上。目前小程序云开发还未提供模糊查询机制,因此我们只有通过正则表达式来完成云开发的模糊查询。 name:...
  • 最近做小程序云开发,做一个多字段搜索功能; 本人不会,然后找了一个很牛笔的回答!特此做笔记,以备他日所用! 看完后清楚明了! 下面是对应的跳转链接 ...小石头牛笔!...下面是我改后的代码!...先给大家看看我做出的效果...
  • 小程序云开发实现搜索功能

    千次阅读 2020-05-14 10:46:00
    云开发数据库的模糊搜索,根据记录的字段字符串模糊搜索实现。 代码: 先在app.js初始化: //app.js App({ onLaunch: function () { wx.cloud.init({ env:'school-5k17122' }) }, globalData: { userInfo...
  • 代码自用自取,复制粘贴直接使用,喜欢的话可以查看博主其它文章...微信小程序云开发为我们提供了很完美的接口实现模糊查询。 先亮代码: WXML: <input bindinput="search"></input> <button bindtap=".
  • 一般小程序都会有一个搜索功能。 // 首先是对数据库中单个字段进行模糊搜索 db.collection('user').where({ //knowledgelabel 是集合user中数据所有的字段 knowledgelabel: { //此处拿的是写在函数中的代码,...
  • //连接数据库 const db = wx.cloud.database() ...//使用正则查询,实现对搜索模糊查询 _name: db.RegExp({ regexp: value, //从搜索栏中获取的value作为规则进行匹配。 options: ‘i’, //大写不区分 }) }).get...
  • 微信小程序开发——云开发如何实现模糊查询

    万次阅读 多人点赞 2019-02-19 20:36:07
    最近在学习开发微信小程序,使用的云开发这种模式,有一个搜索功能基本就是通过输入关键字查询与之相匹配的内容,并展示在页面上。然而对于现在的云开发这种模式小程序好像还没提供一种类似模糊查询的机制,那我们...

空空如也

空空如也

1 2 3
收藏数 51
精华内容 20
关键字:

小程序云开发模糊搜索