关于微信小程序·小程序云开发字段搜索

前言

上个月在做教育类小程序时,需要有单词搜索功能,就是输入英语单词,点击搜索按钮便可以搜索到这个单词的词性和意思。由于小程序内云数据库的构成原型是MongoDB,所以里面很多语法指令和数据原型都与Mongo有很相似的地方,但也是研究了很长时间才弄明白。下面就是相关搜索的原理介绍

数据库字段结构

首先,大家请看我的数据库的字段结构。
集合education

    //其中的一个记录格式
{
      "_id" : "5d04c3c027f78cb81dbf6866",
      "Chinese" : "vt.放弃,遗弃;n.放任,狂热",
      "English" : "a",
      "_openid" : "xxxxxxxxx"
}   //...其余记录与此一致

前端js代码

    pages({
        data{
          search : '',
            },
        getEnglishData : function(e){
           this.data.search = e.detail.value,
           console.log(e),
           console.log(this.data.search)
            //监听输入框内容
          },
        SearchTranslate : function(e){
           var i = this.data.search,   //获取输入框输入内容
           const db = wx.cloud.database(),
           db.collection('education')
           .where({
              English : i    //匹配输入内容
             })
           .get({
              success : res =>{
                this.setData({
                  data : res.data
                 })
                 console.log('[搜索成功]',res)
               }
             })
          }

       })

控制台结果

   {data: Array(1), errMsg: "collection.get:ok"}
   0:{
     Chinese: "art.一(个);每一(个);(同类事物中)任一个"
     English: "a"
     _id: "5cf39bdd27f78cb81d81aec2"
     _openid: "xxxxxxxxxxxxxx"
     //...
      }

有关wxml代码

 <input confirm-type:"search" bindinput="getEnglishData" placeholder="请输入英文单词" value=""/>
    <button bindtap="SearchTranslate"><icon type="search"/>button>
  <block wx:for="{{data}}" wx:key="index">
      <text>{{item.Chinese}}text>   
  block>

你可能感兴趣的:(关于微信小程序·小程序云开发字段搜索)