微信小程序---365笔记第47天---关键字匹配搜索框

1.点击聚焦,右侧出现取消按钮;
2.调起键盘上面的search按钮;
3.输入搜索的内容,匹配到跟含有输入字段的内容;

     <!--搜索框开始-->
      <view class="index-search-bar">
        <view class="index-search-bar__form">
          <!--点击之后,出现input框  -->
          <view class="index-search-bar__box">
            <icon class="index-icon-search_in-box" type="search" size="14"></icon>
            <input confirm-type='search' class="index-search-bar__input" placeholder="请输入关键字" value="{{inputVal}}" focus="{{inputShowed}}" bindinput="inputTyping" />
            <!--输入款字数大于0,则显示清除按钮  -->
            <view class="index-icon-clear" wx:if="{{inputVal.length > 0}}" bindtap="clearInput">
              <icon type="clear" size="14"></icon>
            </view>
          </view>
          <!--没点击之前,只是一些文字和图标  -->
          <label class="index-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput">
            <icon class="index-icon-search" type="search" size="14"></icon>
            <view class="index-search-bar__text">搜索</view>
          </label>
        </view>
        <!--动态出现的“取消”键  -->
        <view class="index-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="hideInput">取消</view>
      </view>
      <!--搜索框结束-->

wxss:

    /* 搜索框开始 */
    .index-search-bar {
      position: relative;
      padding:15rpx 10rpx 15rpx 10rpx;
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      box-sizing: border-box;
      background-color: #fff;
      /* border-top: 1rpx solid #d7d6dc;
      border-bottom: 1rpx solid #d7d6dc; */
    }

    .index-icon-search {
      margin-right: 8px;
      font-size: inherit;
    }

    .index-icon-search_in-box {
      position: absolute;
      left: 10px;
      top: 8px;
    }

    .index-search-bar__text {
      display: inline-block;
      font-size: 14px;
      vertical-align: middle;
      height:66rpx;
    }

    .index-search-bar__form {
      position: relative;
      -webkit-box-flex: 1;
      -webkit-flex: auto;
      flex: auto;
      border-radius:50rpx;
      background: #f3f3f3;
      border: 1rpx solid #f3f3f3;
    }

    .index-search-bar__box {
      position: relative;
      padding-left: 30px;
      padding-right: 30px;
      width: 100%;
      box-sizing: border-box;
      z-index: 1;
    }

    .index-search-bar__input {
      height: 28px;
      line-height: 28px;
      font-size: 14px;
    }

    .index-icon-clear {
      position: absolute;
      top: 0;
      right: 0;
      padding: 7px 8px;
      font-size: 0;
    }

    .index-search-bar__label {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 2;
      border-radius:50rpx;
      text-align: center;
      color: #9b9b9b;
      background: #f3f3f3;
      line-height: 28px;
    }

    .index-search-bar__cancel-btn {
      margin-left: 10px;
      line-height: 28px;
      color: #999;
      white-space: nowrap;
      font-size: 30rpx;
    }

    /* 搜索框结束 */

js:

      //搜索框
      showInput: function() {
        this.setData({
          inputShowed: true
        });
      },

      hideInput: function() {
        this.setData({
          inputVal: "",
          inputShowed: false
        });
        this.getKnowlegeList();//数据函数
      },
      clearInput: function() {
        this.setData({
          inputVal: ""
        });
        this.searchMatch(this);
        this.getKnowlegeList();//数据函数
      },
      inputTyping: function(e) {
        console.log(e.detail.value)
        //搜索数据 // 
        this.setData({
          inputVal: e.detail.value
        });
        this.searchMatch(this, e.detail.value);//数据函数
      },

图片.png

图片.png

热爱前端,热爱编程,热爱分享,欢迎一起聊各种技术问题,一起进步,一起成长!微信:zhan_1337608148

展开阅读全文
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值