当前位置：首页 > VUE

vue实现select可以输入

2026-02-21 08:18:21VUE

实现可输入的Select组件

在Vue中实现可输入的Select组件可以通过结合原生<select>和<input>元素，或者使用第三方UI库完成。以下是几种常见实现方式：

使用原生HTML元素组合

通过组合<input>和<datalist>元素实现基础功能：

vue实现select可以输入

<template>
  <div>
    <input list="options" v-model="selectedValue" placeholder="输入或选择"/>
    <datalist id="options">
      <option v-for="item in options" :value="item.value">{{ item.label }}</option>
    </datalist>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: '',
      options: [
        { value: '1', label: '选项1' },
        { value: '2', label: '选项2' }
      ]
    }
  }
}
</script>

使用Element UI的Select组件

Element UI提供了带有输入功能的Select组件：

vue实现select可以输入

<template>
  <el-select v-model="value" filterable allow-create default-first-option>
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      options: [{
        value: 'HTML',
        label: 'HTML'
      }, {
        value: 'CSS',
        label: 'CSS'
      }]
    }
  }
}
</script>

使用Ant Design Vue的Select组件

Ant Design Vue也支持可输入选择：

<template>
  <a-select
    v-model="value"
    show-search
    allow-clear
    placeholder="输入或选择"
    :options="options"
    :filter-option="filterOption"
  />
</template>

<script>
export default {
  data() {
    return {
      value: undefined,
      options: [
        { value: '1', label: '选项1' },
        { value: '2', label: '选项2' }
      ]
    }
  },
  methods: {
    filterOption(input, option) {
      return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
    }
  }
}
</script>

自定义实现带搜索功能的Select

如需完全自定义实现，可以创建组合组件：

<template>
  <div class="custom-select">
    <input
      v-model="searchText"
      @focus="showOptions = true"
      @blur="handleBlur"
      @keydown.enter="handleEnter"
    />
    <ul v-show="showOptions">
      <li
        v-for="(item, index) in filteredOptions"
        :key="index"
        @mousedown="selectOption(item)"
      >
        {{ item.label }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    options: Array,
    value: [String, Number]
  },
  data() {
    return {
      searchText: '',
      showOptions: false,
      selectedValue: this.value
    }
  },
  computed: {
    filteredOptions() {
      return this.options.filter(option =>
        option.label.toLowerCase().includes(this.searchText.toLowerCase())
      )
    }
  },
  methods: {
    selectOption(item) {
      this.selectedValue = item.value
      this.searchText = item.label
      this.showOptions = false
      this.$emit('input', item.value)
    },
    handleBlur() {
      setTimeout(() => {
        this.showOptions = false
      }, 200)
    },
    handleEnter() {
      if (this.filteredOptions.length > 0) {
        this.selectOption(this.filteredOptions[0])
      }
    }
  }
}
</script>