微信小程序 可输入 的下拉框

微信小程序中也可以实现可输入的下拉框功能。具体实现方法如下：

1. 在wxml文件中添加input组件和picker组件

<view class="picker">
  <input placeholder="请选择或输入" value="{{inputValue}}" bindinput="bindInput"></input>
  <picker mode="selector" range="{{array}}" bindchange="bindPickerChange">
    <view class="picker-text">{{array[index]}}</view>
  </picker>
</view>

其中，`input`组件用于用户输入，`picker`组件用于显示下拉选项。

2. 在js文件中定义数组、输入框内容和选择器改变时的函数

Page({
  data: {
    array: ['选项一', '选项二', '选项三'],
    index: 0,
    inputValue: ''
  },
  bindPickerChange: function (e) {
    this.setData({
      index: e.detail.value
    })
  },
  bindInput: function (e) {
    this.setData({
      inputValue: e.detail.value
    })
  }
})

其中，`inputValue`为输入框中的内容。在`bindInput`函数中，`e.detail.value`表示输入框中的内容。

3. 在wxml中添加一个hidden属性为true的picker-view组件

<view class="picker-view">
  <picker-view hidden="{{hidePicker}}" value="{{pickerIndex}}" bindchange="onPickerChange">
    <picker-view-column>
      <view wx:for="{{pickerList}}" wx:key="{{index}}" class="picker-column">
        {{item}}
      </view>
    </picker-view-column>
  </picker-view>
</view>

其中，`hidePicker`为控制picker-view的显隐，`pickerList`为可搜索选项数组。

4. 在js文件中定义picker-view的数据和改变函数

Page({
  data: {
    pickerList: ['选项一', '选项二', '选项三'],
    pickerIndex: 0,
    hidePicker: true
  },
  onPickerChange: function (e) {
    this.setData({
      pickerIndex: e.detail.value
    })
  }
})

这样，就可以实现一个可输入的下拉框了。用户可以在输入框中输入内容或者在下拉框中选择选项。当用户输入的内容匹配到了选项数组中的某个选项时，该选项会被选中。如果没有匹配项，则会显示一个picker-view组件，用户可以在该组件中选择选项。