收藏
回答

如何获取到从搜索栏上输入的内容?

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

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

回答关注问题邀请回答
收藏

2 个回答

  • 山药药
    山药药
    2021-06-10
    //参考了好几篇关于查询的,糅合起来的,供参考,侵删
    //.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;
    }
    
    
    
    2021-06-10
    有用
    回复
  • Cjiang
    Cjiang
    2021-06-09

    你好,可以参考下weui的Searchbar

    https://developers.weixin.qq.com/miniprogram/dev/extended/weui/search.html

    2021-06-09
    有用
    回复 1
    • 山药药
      山药药
      2021-06-10
      谢谢
      2021-06-10
      回复
登录 后发表内容