TCombobox / 搜索下拉框

Combobox provides a searchable select dropdown with real-time filtering. Supports keyboard navigation, custom options, prepend/append text, and validation. / 搜索下拉框提供带实时搜索过滤的下拉选择器，支持键盘导航、自定义选项、前后缀文本和验证状态。

Props / 属性

Prop	Type / 类型	Default / 默认值	Description / 说明
options	ComboboxOption[]	[]	Option list / 选项列表
placeholder	string	'搜索...'	Placeholder text
disabled	boolean	false	Disabled
size	'sm' | 'lg'	—	Size
validation	'valid' | 'invalid'	—	Validation state
block	boolean	false	Full width
prependText	string	—	Prefix text
appendText	string	—	Suffix text

ComboboxOption 接口

interface ComboboxOption {
  value: string
  label: string
  aliases?: string[]  // 搜索别名
}

Basic Usage / 基础用法

<script setup lang="ts">
import { TCombobox } from '@gulcc/tabler-vue'

const value = ref('')
const options = [
  { value: 'vue', label: 'Vue.js', aliases: ['vue3'] },
  { value: 'react', label: 'React' },
  { value: 'angular', label: 'Angular' },
]
</script>

<template>
  <TCombobox v-model="value" :options="options" placeholder="Search / 搜索..." />
</template>

Tips / 避坑指南

• Supports real-time filtering as the user types — uses aliases for extra search terms
• Uses @vueuse/core onClickOutside for click-away-to-close behavior
• block makes the combobox fill its container width