uniapp小程序：select下拉框搜索选择-搜索框与下拉框结合的完美解决方案

2023-11-01 03:07:37

在 Uniapp 小程序中实现下拉框搜索选择功能

在 Uniapp 小程序中，select 下拉框控件本身并不支持搜索功能。但我们可以通过结合使用搜索框和下拉框控件，来实现下拉框的搜索选择功能。

实现步骤

添加控件： 在页面中添加一个搜索框控件和一个下拉框控件。
搜索框绑定输入事件： 在搜索框控件中绑定输入事件，并在事件中进行搜索。
更新下拉框选项： 将搜索结果动态更新到下拉框控件中。
保存选中值： 当用户选择下拉框中的某个选项时，将该选项的值保存到变量中。

示例代码

<view>
  <input type="text" placeholder="搜索" on-input="handleSearch"/>
  <select value="{{selectedValue}}" on-change="handleChange">
    <option v-for="option in options" :key="option.value" :value="option.value">{{option.text}}</option>
  </select>
</view>

export default {
  data() {
    return {
      options: [],
      selectedValue: '',
      searchText: ''
    }
  },
  methods: {
    handleSearch(e) {
      this.searchText = e.detail.value
      this.updateOptions()
    },
    handleChange(e) {
      this.selectedValue = e.detail.value
    },
    updateOptions() {
      // 这里模拟搜索数据，实际项目中需要从服务器获取
      const options = this.options.filter(option => option.text.includes(this.searchText))
      this.options = options
    }
  }
}