微信小程序带搜索功能的input框

1.wxml

<view class='list-msg2'>
      <text>车牌号码：</text>
      <text>粤B</text>
      <!-- <input class="list-select" style="width: 45%;" placeholder="输入车牌号码" value="{{licenseNo1}}" bindinput='inputLicense'></input> -->
      <input class="list-select" style="width: 45%;" placeholder="输入车牌号码" type="text" bindinput="bindKeyInput" value="{{licenseNo1}}" data-statu="open" />
    </view>
    <!--mask-->
    <view class="input_screen" bindtap="bindKeyInput" data-statu="close" wx:if="{{showInputStatus}}"></view> 
    <!-- auto-completion  -->
    <scroll-view scroll-y="true" class="scrollview" wx:if="{{showInputStatus}}">
      <view style="margin-top:10px;"></view>
      <view wx:for="{{bindSource}}">
        <view id="{{item.licenseNo}}" data-key="{{item.fourNum}}" class="itemview" bindtap="itemtap" data-statu="close" wx:if="{{showInputStatus}}">
                  {{item.licenseNo}}   
        </view>
      </view>
    </scroll-view>

2. wxss

.list-msg2 {
  height: 60rpx;
  display: flex;
  align-items: center;
  padding: 0 10rpx;
  margin-left: 15px;
  margin-top: 20px;
}
.list-select{
  border: 1px solid #eee;
  width:55%;
  padding-left: 15rpx;
}
.scrollview{
  width: 30%;
  height: 90px;
  background: rgb(162, 210, 238);
  position: relative;
  left: 35%;
  top: -2px;

}

3.wxjs

var app = getApp();
var url = app.globalData.myUrlPath;
Page({

  data: {
    licenseNo:"",
    licenseNo1:"",
    adapterSource: [],
    bindSource: [],
    showInputStatus: false,
  },
  onLoad:function(options){
   
  },
  onUnload:function(){
     var pages =getCurrentPages();//当前页面栈
        if (pages.length >1) {
          var beforePage = pages[pages.length- 2];//获取上一个页面实例对象
          beforePage.refreshData();//触发父页面中的方法
        }
  },
  bindKeyInput: function (e) {
    var currentInputStatu = e.currentTarget.dataset.statu;
    var prefix = e.detail.value//用户实时输入值
    var newSource = []//匹配的结果
    var adapterSource = JSON.parse(this.data.adapterSource);
    var that = this;
    
    if (prefix != "") {
      if(adapterSource.length==0){
        e.detail.value.toUpperCase()
        that.setData({
          licenseNo:"粤B"+e.detail.value.toUpperCase(),
          licenseNo1:e.detail.value.toUpperCase(),
          disabled:false
        });
      }else{
        adapterSource.forEach(function (item, index) {
          if (item.licenseNo.indexOf(prefix.toUpperCase()) != -1) {//返回某个指定的字符串值在字符串中首次出现的位置,如果要检索的字符串值没有出现，则该方法返回 -1
            var no_dict = {
              // "licenseNo":"粤B"+item.licenseNo,
              "licenseNo":item.licenseNo,
              "fourNum":item.fourNum,
            }
            newSource.push(no_dict)
          }else{
            e.detail.value.toUpperCase()
            that.setData({
              licenseNo:"粤B"+e.detail.value.toUpperCase(),
              licenseNo1:e.detail.value.toUpperCase(),
              disabled:false
            });
          }
        })
      }
      
    } else {
      currentInputStatu = "close";
      that.setData(
        {
          isScroll: true,
        }
      );
    }
    if (newSource.length != 0) {
      that.setData({
        bindSource: newSource
      })
    } else {
      that.setData({
        bindSource: []
      })
      currentInputStatu = "close";
      that.setData(
        {
          isScroll: "{{false}}"
        }
      );
    }
    //关闭 
    if (currentInputStatu == "close") {
      that.setData(
        {
          showInputStatus: false,
          isScroll: true
        }
      );
    }
    // 显示 
    if (currentInputStatu == "open") {
      that.setData(
        {
          showInputStatus: true,
          isScroll: "{{false}}"
        }
      );
    }
  },
  //点击选型确定input值
  itemtap: function (e) {
    var currentInputStatu = e.currentTarget.dataset.statu;
    var id = e.currentTarget.dataset.key;
    var license = e.target.id;
    // var result = license.split("粤B")
    this.setData({
      // licenseNo1: result[1],
      licenseNo1: license,
      fourNum1: id,
      bindSource: []
    })
    //关闭 
    if (currentInputStatu == "close") {
      this.setData(
        {
          showInputStatus: false,
          isScroll: true
        }
      );
    }
    // 显示 
    if (currentInputStatu == "open") {
      this.setData(
        {
          showInputStatus: true,
          isScroll: "{{false}}"
        }
      );
    }
  },
})