微信小程序输入框---模糊搜索

	<view class="starTime" style="margin: 40rpx 0;">
	  <text style="	width:160rpx;" >车牌号码:</text>
	 <view class="section" style="display: flex;align-items: center; position: relative;">
	   <input 
	     type="text" 
	     style="margin-left: 40rpx;font-size: 33rpx;"
	     class="weui-search-bar__input flex1 mar-l" 
	     placeholder="请输入车牌号码" 
	     value="{{inputVal}}" 
	     bindinput="inputTyping" 
	     bindfocus="showDropdown"
	     bindblur="hideDropdown"
	   />
	   
	   <!-- 下拉选择框 -->
	   <view class="dropdown" wx:if="{{showDropdown && carList.length > 0}}">
	     <view class="dropdown-item" wx:for="{{carList}}" wx:key="index" bindtap="selectCar"   data-label="{{item.label}}" data-plateber="{{item.plateNumber}}">
	       {{item.label}} <!-- 假设车牌字段是licensePlate，根据实际接口调整 -->
	     </view>
	   </view>
	 </view>
	 <image  class="module-icon" src="https:el.png"   bindtap="clearInput"></image>
	  </view>

css

Page({
  data: {
    inputVal: '',
    carList: [], // 存储车牌列表
    showDropdown: false, // 控制下拉框显示
    routeId: '', // 假设已有此数据
    timer: null // 防抖计时器
  },

  // 输入事件处理
  inputTyping(e) {
    const value = e.detail.value
    this.setData({
      inputVal: value
    })

    // 防抖处理：输入停止300ms后再调用接口
    if (this.data.timer) {
      clearTimeout(this.data.timer)
    }
    this.data.timer = setTimeout(() => {
      if (value.trim()) { // 有输入内容才调用接口
        this.getQueryVehicleList4shift()
      } else {
        // 清空输入时清空列表
        this.setData({
          carList: []
        })
      }
    }, 300)
  },

  // 显示下拉框
  showDropdown() {
    if (this.data.carList.length > 0) {
      this.setData({
        showDropdown: true
      })
    }
  },

  // 隐藏下拉框（延迟执行，避免选择时立即隐藏）
  hideDropdown() {
    setTimeout(() => {
      this.setData({
        showDropdown: false
      })
    }, 200)
  },

  // 选择车牌
  selectCar(e) {
    const selected = e.currentTarget.dataset.item
    this.setData({
      inputVal: selected.licensePlate, // 显示选中的车牌
      showDropdown: false // 选中后隐藏下拉框
    })
    // 可以在这里添加选择后的其他逻辑
  },

  // 调用模糊搜索接口
  getQueryVehicleList4shift() {
    requestApi.get('system/vehicle/queryVehicleList4shift', {
      fleetId: wx.getStorageSync('information').fleetId,
      routeId: this.data.routeId,
      sf: this.data.inputVal // 搜索关键词
    }).then(res => {
      let carList = res.data || []
      console.log('车牌列表：', carList)
      this.setData({
        carList: carList,
        showDropdown: carList.length > 0 // 有数据时显示下拉框
      })
    }).catch(err => {
      console.error('接口调用失败：', err)
      this.setData({
        carList: []
      })
    })
  }
})

Page({
  data: {
    inputVal: '',
    carList: [], // 存储车牌列表
    showDropdown: false, // 控制下拉框显示
    routeId: '', // 假设已有此数据
    timer: null // 防抖计时器
  },

  // 输入事件处理
  inputTyping(e) {
    const value = e.detail.value
    this.setData({
      inputVal: value
    })

    // 防抖处理：输入停止300ms后再调用接口
    if (this.data.timer) {
      clearTimeout(this.data.timer)
    }
    this.data.timer = setTimeout(() => {
      if (value.trim()) { // 有输入内容才调用接口
        this.getQueryVehicleList4shift()
      } else {
        // 清空输入时清空列表
        this.setData({
          carList: []
        })
      }
    }, 300)
  },

  // 显示下拉框
  showDropdown() {
    if (this.data.carList.length > 0) {
      this.setData({
        showDropdown: true
      })
    }
  },

  // 隐藏下拉框（延迟执行，避免选择时立即隐藏）
  hideDropdown() {
    setTimeout(() => {
      this.setData({
        showDropdown: false
      })
    }, 200)
  },

  // 选择车牌
  selectCar(e) {
    const selected = e.currentTarget.dataset.item
    this.setData({
      inputVal: selected.licensePlate, // 显示选中的车牌
      showDropdown: false // 选中后隐藏下拉框
    })
    // 可以在这里添加选择后的其他逻辑
  },

  // 调用模糊搜索接口
  getQueryVehicleList4shift() {
    requestApi.get('syst4/shift', {
      fleetId: wx.getStorageSync('information').fleetId,
      routeId: this.data.routeId,
      sf: this.data.inputVal // 搜索关键词
    }).then(res => {
      let carList = res.data || []
      console.log('车牌列表：', carList)
      this.setData({
        carList: carList,
        showDropdown: carList.length > 0 // 有数据时显示下拉框
      })
    }).catch(err => {
      console.error('接口调用失败：', err)
      this.setData({
        carList: []
      })
    })
  }
})