如何获取到从搜索栏上输入的内容?
发布于 4 年前 作者 penggang 15325 次浏览 来自 官方Issues

想做查询功能,数据库模糊查询这里,想在自制搜索栏上输入内容,然后把输入的内容传给regexp。主要的问题是不知道哪个参数接收了输入的内容,唉。

参考的代码来自:https://www.jb51.net/article/182378.htm

3 回复
//参考了好几篇关于查询的,糅合起来的,供参考,侵删
//.js
const app = getApp()
Page({
  data: {
   
  },

   formSubmitfunction (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({
      successres => {
        that.setData({
         queryResultJSON.stringify(res.data, null2)
        })
        console.log('[数据库] [查询记录] 成功: ', res)
        wx.hideLoading();
      },
      failerr => {
        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;
}

回到顶部