首页 > 编程知识 正文

小程序云开发实现搜索功能的方法,微信小程序云开发搜索功能

时间:2023-05-06 08:56:16 阅读:281383 作者:2698

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

代码:

先在app.js初始化:

//app.jsApp({ 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.jsvar 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;}

完成

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。