如何获取到从搜索栏上输入的内容?
想做查询功能,数据库模糊查询这里,想在自制搜索栏上输入内容,然后把输入的内容传给regexp。主要的问题是不知道哪个参数接收了输入的内容,唉。
3 回复
//参考了好几篇关于查询的,糅合起来的,供参考,侵删
//.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;
}