小程序-input實現下拉查詢

效果圖

1.wxml

<view class='uinn'>

  <view class="weui-search-bar flex-row uinn bg_white mar-t">

    <view class="weui-search-bar__form flex1 flex-row">

      <icon class="weui-icon-search_in-box" type="clear" size="14"></icon>

      <input type="text" class="weui-search-bar__input" placeholder="請輸入查詢信息" value="{{inputVal}}" bindinput="inputTyping" class='flex1 mar-l' />

      <scroll-view class='scroll-view' wx:if='{{viewShowed}}' scroll-y>

      <view wx:for="{{carList}}" wx:key="{{index}}" class="msg-item " >

        <view class='user-name' bindtap='name' data-index="{{index}}" >{{item}}</view>

      </view>

      </scroll-view>

    </view>

    <view class="weui-search-bar__cancel-btn" bindtap="hideInput">取消</view>

  </view>

</view>

2.css

 

 .scroll-view {

  width: 50%;

  position: absolute;

  top: 80rpx;

  left: 30rpx;

  background-color: white;

  -moz-box-shadow: 0px 0px 2px #e2e2e2;

  -webkit-box-shadow: 0px 0px 2px #e2e2e2;

  box-shadow: 0px 0px 2px #e2e2e2;

} 

.user-name {

  width: 100%;

  padding: 20rpx;

  font-size: 33rpx;

  border-bottom: 1px solid #e2e2e2;

} 

 

3.js

var app = getApp()

Page({

  data: {

    viewShowed: false, //顯示結果view的狀態

    inputVal: "", // 搜索框值

    catList: [], //搜索渲染推薦數據

    list1: ['1', '11','111', '2', '22', '李毅22', '王二3', '王五', '王一', '王三']

  },

  onLoad: function() {},

 

  // 隱藏搜索框樣式

  hideInput: function() {

    this.setData({

      inputVal: "",

      viewShowed: false,

    });

  },

  // 鍵盤擡起事件2

  inputTyping: function(e) {

    console.log("input-----",e)

    var value = e.detail.value

    var that = this;

    var list1 = that.data.list1

    if (value == '') {

      that.setData({

        viewShowed: false,

      });

    } else {

    //「這裏須要特別注意，否則在選中下拉框值的時候，下拉框又出現」

      if (e.detail.cursor) { //e.detail.cursor表示input值當前焦點所在的位置

        var arr = [];

        for (var i = 0; i < list1.length; i++) {

          if (list1[i].indexOf(value) >= 0) {

            arr.push(list1[i]);

          }

        }

        console.log(arr)

        that.setData({

          viewShowed: true,

          carList: arr

        });

      }

    }

  },

  // 獲取選中推薦列表中的值

  name: function(res) {

    console.log(res.currentTarget.dataset.index);

    var index = res.currentTarget.dataset.index

    var that = this;

    that.setData({

      inputVal: that.data.carList[index],

      viewShowed: false,

    })

  },

});