手机号码输入历史记录匹配

效果图

html

<view class="top_phone">
  <input placeholder="请输入手机号" type='number' bindinput='top_phone_input' bindfocus='top_phone_focus' value='{{phone}}'></input>
  <button>选择号码</button>
</view>
<block wx:if='{{if_phone_list}}'>
  <block wx:for="{{phone_show_list}}" wx:key=''>
    <view class='item_phone_list' bindtap='item_phone_click' id='{{item}}'>{{item}}</view>
  </block>
  <view class='phone_list' style='position: relative;'>
    <view class='phone_list_bg' bindtap='phone_list_bg_click'></view>
  </view>
</block>
<view class='underline'></view>

js

Page({
  data: {
    if_phone_list: false,
    hPhones: [13021103512, 13121103512],
    phone_show_list: [13021103512, 13121103512],
  },

  onLoad: function(options) {},

  // 手机号码输入框值变动事件
  top_phone_input: function (e) {
    var phone = e.detail.value;
    console.log(phone)
    this.setData({
      if_phone_list: true,
      phone: phone
    })
    var arr = [];
    var hPhones = this.data.hPhones;
    hPhones.find(function (item) {
      var num = item.toString().substring(0, phone.length)
      if (num == phone) {
        arr.push(item)
      }
    })
    this.setData({
      phone_show_list: arr
    })
    if (arr.length == 0) {
      this.setData({
        if_phone_list: false
      })
    } else {
      this.setData({
        if_phone_list: true
      })
    }
    this.if_util_isUnicoms(phone);
  },
})

css

.top_phone {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.top_phone input {
  width: 100%;
  margin: 20rpx 40rpx 30rpx 40rpx;
  border-bottom: 1px solid #d0d0d0;
  font-size: 50rpx;
  height: 80rpx;
  line-height: 80rpx;
  padding-bottom: 10rpx;
}

.top_phone button {
  width:230rpx;
  height: 60rpx;
  padding: 0 auto;
  font-size: 25rpx;
  margin: 40rpx 20rpx 20rpx 30rpx;
  line-height: 60rpx;
  background: white;
  border: 1rpx solid #d0d0d0;
}
.item_phone_list{
  height: 100rpx;
  line-height: 100rpx;
  padding-left: 30rpx;
  border-top: 1px solid #d0d0d0;
}
.phone_list_bg{
  width: 100%;
  z-index: 3;
  background-color: rgba(0,0,0,0.4);
  height: 1000rpx;
  position: absolute;
  top: 0;
}
.underline {
  height: 16rpx;
  border-top: 1px solid #E8E8E8;
  border-bottom: 1px solid #E8E8E8;
  background: #F8F8F8;
}