如何在Bootstrap Vue v2.21.2中实现ComboBox组件（不使用Vuetify的v-combobox及外部CSS插件）

完全不用切换到Vuetify！Bootstrap Vue v2.21.2本身就可以通过组合现有组件或者使用官方自带的组件来实现ComboBox（可输入+下拉选择）的功能，我给你两种靠谱的实现方式：

方案一：自定义组合输入框与下拉框 #

如果需要高度自定义交互逻辑，可以通过b-form-input和b-dropdown组合实现，全程使用Bootstrap Vue原生组件：

<template>
  <div class="position-relative" style="width: 300px;">
    <!-- 输入框 -->
    <b-form-input
      v-model="selectedValue"
      ref="inputRef"
      @focus="showDropdown = true"
      @blur="handleBlur"
      placeholder="输入或选择选项"
    ></b-form-input>

    <!-- 下拉选项框 -->
    <b-dropdown
      ref="dropdownRef"
      v-model="showDropdown"
      no-caret
      class="position-absolute w-100 mt-0 border-top-0"
      :toggle-class="false"
    >
      <b-dropdown-item
        v-for="item in options"
        :key="item.value"
        @click="selectItem(item)"
      >
        {{ item.label }}
      </b-dropdown-item>
    </b-dropdown>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: '',
      showDropdown: false,
      // 自定义选项列表
      options: [
        { value: 'opt1', label: '前端开发' },
        { value: 'opt2', label: '后端开发' },
        { value: 'opt3', label: '测试工程师' }
      ]
    };
  },
  methods: {
    // 选择下拉选项后填充输入框
    selectItem(item) {
      this.selectedValue = item.label;
      this.showDropdown = false;
      this.$refs.inputRef.focus();
    },
    // 处理输入框失焦事件，延迟关闭避免点击选项时直接隐藏
    handleBlur() {
      setTimeout(() => {
        this.showDropdown = false;
      }, 200);
    }
  }
};
</script>

关键点说明： #

• 用相对定位容器包裹输入框和下拉框，让下拉框刚好对齐输入框下方
• 监听输入框焦点事件显示下拉，失焦时延迟关闭（防止点击选项时下拉提前隐藏）
• 点击下拉选项后自动填充输入框并恢复输入框焦点

方案二：使用官方b-typeahead组件（推荐） #

Bootstrap Vue v2.x自带的b-typeahead组件天生就是为「输入过滤+下拉选择」的场景设计的，完全符合ComboBox的需求，而且无需自己写复杂的交互逻辑：

<template>
  <b-typeahead
    v-model="selectedValue"
    :items="options"
    :filterable="true"
    :debounce="0"
    placeholder="输入或选择岗位"
    label="岗位选择"
    variant="outline-secondary"
    class="w-25"
    <!-- 如果选项是对象，可指定显示文本和绑定值的字段 -->
    item-text="label"
    item-value="value"
  ></b-typeahead>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: null,
      options: [
        { value: 'opt1', label: '前端开发' },
        { value: 'opt2', label: '后端开发' },
        { value: 'opt3', label: '测试工程师' },
        { value: 'opt4', label: '产品经理' }
      ]
    };
  }
};
</script>

关键点说明： #

• filterable设为true允许输入过滤选项，输入时会自动匹配并展示符合条件的下拉项
• 如果选项是简单字符串数组，可直接绑定items，无需配置item-text和item-value
• 支持自定义下拉项模板（通过scoped slot），满足更复杂的UI需求

总结 #

如果你追求快速实现且不需要高度自定义，方案二的b-typeahead是最佳选择，它是Bootstrap Vue官方维护的组件，稳定性和兼容性都有保障；如果需要特殊的交互逻辑，方案一的自定义组合方式可以灵活调整细节。完全不需要切换到Vuetify就能搞定！

内容的提问来源于stack exchange，提问作者klonoa123