小程序
小游戏
企业微信
微信支付
扫描小程序码分享
想做查询功能,数据库模糊查询这里,想在自制搜索栏上输入内容,然后把输入的内容传给regexp。主要的问题是不知道哪个参数接收了输入的内容,唉。
参考的代码来自:https://www.jb51.net/article/182378.htm
2 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
//参考了好几篇关于查询的,糅合起来的,供参考,侵删 //.js const app = getApp() Page({ data: { }, formSubmit: function (e) { var that = this; var formData = e.detail.value.keyword; wx.showLoading({ title: '搜索中', icon: 'loading' }) //console.log('输入',this.data.value) const db = wx.cloud.database() var that = this db.collection('hosp').where({ //"hosp"是要查询的云开发数据库合集的名字 //使用正则查询,实现对搜索的模糊查询 医院名称: db.RegExp({ //这里的"医院名称"是自己需要查找的字段名 regexp: formData, //从搜索栏中获取的value作为规则进行匹配。 options: 'i', //大小写不区分 }) }).get({ success: res => { that.setData({ queryResult: JSON.stringify(res.data, null, 2) }) console.log('[数据库] [查询记录] 成功: ', res) wx.hideLoading(); }, fail: err => { wx.showToast({ icon: 'none', title: '查询记录失败' }) console.error('[数据库] [查询记录] 失败:', err) } }) }, //.wxml <!-- 以下是搜索框 --> <view> <view> <form bindsubmit="formSubmit"> <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="18"></icon> <input type="text" name="keyword" class="weui-search-bar__input" placeholder="请输入医院名称"/> </view> </view> <!-- 搜索按钮,调用搜索查询方法 --> <button formType="submit" class="search_btn" style="width:250rpx">搜索</button> </view> </form> </view> </view> <!-- 以下是表格 --> <view class="txtmotto">"搜索结果"</view> <text user-select="true">{{inpvalue}}</text> <view class="tr"> <text class="td" wx:if="{{queryResult}}" user-select="true">{{queryResult}}</text> </view> //.wxss /* pages/index/hospsearch.wxss */ .txtmotto { display: flex; flex-direction: column; align-items: center; color: #000f52c7; font-size:medium; } .table{ border: 1px solid #CCC; width: 100%; } .tr{ width: 100%; display: flex; justify-content: space-between; } .th{ font-weight: 900; background-color: lightcyan; font-size: 10px; color: #000000; } .th,.td{ padding: 10px; width:100%; text-align: center; font-size: 10px; } .weui-search-bar { position: relative; padding: 8px 10px; display: -webkit-box; display: -webkit-flex; display: flex; box-sizing: border-box; background-color: #EFEFF4; border-top: 1rpx solid #D7D6DC; border-bottom: 1rpx solid #D7D6DC; } .weui-icon-search_in-box { position: absolute; left: 10px; top: 7px; } .weui-search-bar__form { -webkit-box-flex: 1; -webkit-flex: auto; flex: auto; border-radius: 5px; background: #FFFFFF; border: 1rpx solid #E6E6EA; } .weui-search-bar__box { position: relative; padding-left: 30px; padding-right: 30px; width: 100%; box-sizing: border-box; z-index: 1; } .weui-search-bar__input { height: 28px; line-height: 28px; font-size: 16px; } .cancel-btn { margin-left: 10px; line-height: 20px; color: #000000; white-space: nowrap; width: 3px; }
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
你好,可以参考下weui的Searchbar
https://developers.weixin.qq.com/miniprogram/dev/extended/weui/search.html
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
//参考了好几篇关于查询的,糅合起来的,供参考,侵删 //.js const app = getApp() Page({ data: { }, formSubmit: function (e) { var that = this; var formData = e.detail.value.keyword; wx.showLoading({ title: '搜索中', icon: 'loading' }) //console.log('输入',this.data.value) const db = wx.cloud.database() var that = this db.collection('hosp').where({ //"hosp"是要查询的云开发数据库合集的名字 //使用正则查询,实现对搜索的模糊查询 医院名称: db.RegExp({ //这里的"医院名称"是自己需要查找的字段名 regexp: formData, //从搜索栏中获取的value作为规则进行匹配。 options: 'i', //大小写不区分 }) }).get({ success: res => { that.setData({ queryResult: JSON.stringify(res.data, null, 2) }) console.log('[数据库] [查询记录] 成功: ', res) wx.hideLoading(); }, fail: err => { wx.showToast({ icon: 'none', title: '查询记录失败' }) console.error('[数据库] [查询记录] 失败:', err) } }) }, //.wxml <!-- 以下是搜索框 --> <view> <view> <form bindsubmit="formSubmit"> <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="18"></icon> <input type="text" name="keyword" class="weui-search-bar__input" placeholder="请输入医院名称"/> </view> </view> <!-- 搜索按钮,调用搜索查询方法 --> <button formType="submit" class="search_btn" style="width:250rpx">搜索</button> </view> </form> </view> </view> <!-- 以下是表格 --> <view class="txtmotto">"搜索结果"</view> <text user-select="true">{{inpvalue}}</text> <view class="tr"> <text class="td" wx:if="{{queryResult}}" user-select="true">{{queryResult}}</text> </view> //.wxss /* pages/index/hospsearch.wxss */ .txtmotto { display: flex; flex-direction: column; align-items: center; color: #000f52c7; font-size:medium; } .table{ border: 1px solid #CCC; width: 100%; } .tr{ width: 100%; display: flex; justify-content: space-between; } .th{ font-weight: 900; background-color: lightcyan; font-size: 10px; color: #000000; } .th,.td{ padding: 10px; width:100%; text-align: center; font-size: 10px; } .weui-search-bar { position: relative; padding: 8px 10px; display: -webkit-box; display: -webkit-flex; display: flex; box-sizing: border-box; background-color: #EFEFF4; border-top: 1rpx solid #D7D6DC; border-bottom: 1rpx solid #D7D6DC; } .weui-icon-search_in-box { position: absolute; left: 10px; top: 7px; } .weui-search-bar__form { -webkit-box-flex: 1; -webkit-flex: auto; flex: auto; border-radius: 5px; background: #FFFFFF; border: 1rpx solid #E6E6EA; } .weui-search-bar__box { position: relative; padding-left: 30px; padding-right: 30px; width: 100%; box-sizing: border-box; z-index: 1; } .weui-search-bar__input { height: 28px; line-height: 28px; font-size: 16px; } .cancel-btn { margin-left: 10px; line-height: 20px; color: #000000; white-space: nowrap; width: 3px; }
你好,可以参考下weui的Searchbar
https://developers.weixin.qq.com/miniprogram/dev/extended/weui/search.html