小程序云开发实现搜索功能

云开发数据库的模糊搜索，根据记录的字段字符串模糊搜索实现。

代码：

先在app.js初始化：

//app.js
App({onLaunch: function () {wx.cloud.init({env:'school-5k17122'})},globalData: {userInfo: null}
})

然后搜索的wxml

  <view class='page_row' bindtap="suo"><view class="search"><view class="df search_arr"><icon class="searchcion" size='20' type='search'></icon><input class="" bindinput="input_p" placeholder="请输入关键字" value="{{searchValue}}" /></view></view><view class='sousuo' catchtap="see">搜索</view></view><block wx:if='{{obj}}' wx:for='{{obj}}' wx:key=''><view class="title">成都信息工程大学</view><view class="item">名字：{{item.name}}</view><view class="item">位置：{{item.place}}</view><view class="item">类型：{{item.type}}</view></block>

然后在搜索页面的Js实现

// pages/search/search.js
var text=''Page({/*** 页面的初始数据*/data: {},see(){var that=this// 田径const db = wx.cloud.database()const school = db.collection('school')school.where({type: {$regex: '.*' + text + '.*',$options: '1'}}).get({success: res => {console.log('匹配', res)if (res.data.length == 0) {wx.showModal({title: '提示',content: '暂时没找到对应答案',showCancel: false,success: function (res) { }})return;}else{that.setData({obj: res.data})}}})},input_p(e){text = e.detail.value},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {console.log('--------------1111')// const db = wx.cloud.database()// const school = db.collection('school')// school.add({//   // data 字段表示需新增的 JSON 数据//   data: {//     name: '食堂厕所',//     place: '一二食堂一楼',//     type: '厕所'//   },//   success: function (res) {//     // res 是一个对象，其中有 _id 字段标记刚创建的记录的 id//     console.log('--------------',res)//   }// })},
})

样式：

.search{width: 80%;
}
.search_arr {border: 1px solid #d0d0d0;border-radius: 10rpx;margin-left: 20rpx;
}
.search_arr input{margin-left: 60rpx;height: 60rpx;border-radius: 5px;
}
.bc_text {line-height: 68rpx;height: 68rpx;margin-top: 34rpx;
}.sousuo {margin-left: 15rpx;width: 15%;line-height: 150%;text-align: center;border: 1px solid #d0d0d0;border-radius: 10rpx;}
.page_row{display: flex;flex-direction: row;border-bottom: 1px solid #d0d0d0;
}
.item{margin: 40rpx;line-height: 100rpx;height: 100rpx;}
.searchcion {margin: 10rpx 10rpx 10rpx 10rpx;position: absolute;left:25rpx;z-index: 2;width: 20px;height: 20px;text-align: center;
}
.title{margin-top: 100rpx;margin-left: 30rpx;
}

完成

小程序云开发实现搜索功能相关推荐

怎么实现微信小程序云开发拼团功能？
[微信云开发教程]怎么实现微信小程序云开发拼团功能? 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录 [微 ...
微信小程序云开发实现退款功能
微信小程序云开发实现退款功能官方文档小程序云开发实现微信支付官方文档非常的简单,也没有示例代码,只是列出了许多需要的参数,对于新手来说会可能有点迷糊.可以我的步骤跟着一步一步来. 一.获取退款A ...
小程序开发探秘：『小程序·云开发』新功能“云调用”上手体验
近期微信『小程序·云开发』悄悄的上线了一个叫做"云调用"的新功能. 从文档上看,云调用是基于云函数使用小程序开放接口的能力,在云函数中使用云调用来调用服务端接口,无需换取acc ...
关于微信小程序·小程序云开发字段搜索
前言上个月在做教育类小程序时,需要有单词搜索功能,就是输入英语单词,点击搜索按钮便可以搜索到这个单词的词性和意思.由于小程序内云数据库的构成原型是MongoDB,所以里面很多语法指令和数据原型都与M ...
小程序云开发接入赞赏功能
本次演示的是如何在自己的小程序中接入给赞小程序的赞赏功能. 1. 微信搜索给赞小程序,进入小程序后先进行 "赞赏设置",主要包括设置赞赏金额,还可以在 "我的&q ...
微信小程序的开发之搜索功能
就直接贴代码啦~ wxml <view class="weui-search-bar"><view class="weui-search-bar__fo ...
【第三篇】微信小程序云开发项目总结
上篇文章:[第二篇]微信小程序云开发项目总结功能点2:答疑解惑这个功能点的实现基本与用户填写简历相同,都是用户上传数据到数据库,不加说明. 功能点3:消息回复这个板块是用户查看管理员的回复消息的 ...
小程序云开发搜索功能的实现正则_几行代码实现小程序云开发提现功能
先看效果: 纯云开发实现,下面说使用步骤:一:开通商户的企业付款到领取功能说明地址: https://pay.weixin.qq.com/wiki/doc/api/tools/mch_pay.php? ...
小程序云开发搜索功能的实现正则_码code | 如何借助小程序云开发实现小程序支付功能...
转载来源:编程小石头我们在做小程序支付相关的开发时,总会遇到这些难题.小程序调用微信支付时,必须要有自己的服务器,有自己的备案域名,有自己的后台开发.这就导致我们做小程序支付时的成本很大. 本节就来 ...

小程序云开发实现搜索功能

小程序云开发实现搜索功能相关推荐

最新文章

热门文章