Autocomplete

Поле ввода с выпадающим списком подсказок. Фильтрует варианты по мере ввода с поддержкой навигации клавиатурой.

<script setup>
import { ref } from 'vue'

const value = ref('')
const options = ['Apple', 'Banana', 'Cherry', 'Date', 'Grape', 'Mango', 'Orange']
</script>

<template>
  <VxAutocomplete v-model="value" :options="options" placeholder="Search fruits..." clearable />
</template>

Object Options

Передавайте объекты с полями value и label.

<script setup>
const countries = [
  { value: 'us', label: 'United States' },
  { value: 'gb', label: 'United Kingdom' },
  { value: 'de', label: 'Germany' },
]
</script>

<template>
  <VxAutocomplete v-model="value" :options="countries" placeholder="Search countries..." />
</template>

Select Event

Слушайте @select, чтобы получить полный выбранный элемент.

<template>
  <VxAutocomplete v-model="value" :options="countries" @select="onSelect" />
</template>

Sizes

<template>
  <VxAutocomplete size="sm" placeholder="Small" />
  <VxAutocomplete placeholder="Default" />
  <VxAutocomplete size="lg" placeholder="Large" />
</template>

Disabled Options

<script setup>
const options = [
  { value: 'active', label: 'Active option' },
  { value: 'disabled', label: 'Disabled option', disabled: true },
]
</script>

<template>
  <VxAutocomplete :options="options" trigger-on-focus />
</template>

Trigger on Focus

Показывать все подсказки при фокусе на поле, даже без ввода текста.

<template>
  <VxAutocomplete :options="options" trigger-on-focus placeholder="Click to see all..." />
</template>

Remote / Async

Используйте fetch-suggestions для асинхронной загрузки данных. Хорошо сочетается с debounce.

<script setup>
async function fetchUsers(query) {
  const res = await fetch(`/api/users?q=${query}`)
  return res.json()
}
</script>

<template>
  <VxAutocomplete :fetch-suggestions="fetchUsers" :debounce="300" placeholder="Search users..." />
</template>

Disabled

<template>
  <VxAutocomplete :options="options" disabled />
</template>

Custom Option Slot

<template>
  <VxAutocomplete :options="countries" trigger-on-focus>
    <template #option="{ item, highlight }">
      <span class="flag">{{ item.value.toUpperCase() }}</span>
      <span v-html="highlight(item.label)" />
    </template>
  </VxAutocomplete>
</template>

Props

Prop	Type	Default	Description
modelValue	string	''	Значение поля ввода (v-model)
options	string[] | AutocompleteOption[]	[]	Статический список вариантов
placeholder	string	''	Текст плейсхолдера
disabled	boolean	false	Отключить поле ввода
clearable	boolean	false	Показывать кнопку очистки
size	'sm' | 'default' | 'lg'	'default'	Размер поля ввода
debounce	number	0	Задержка debounce в мс
highlight	boolean	true	Подсвечивать совпавший текст
emptyText	string	'No results'	Текст при отсутствии совпадений
fetchSuggestions	(query: string) => Option[] | Promise<Option[]>	—	Функция асинхронной загрузки
triggerOnFocus	boolean	false	Показывать подсказки при фокусе
valueKey	string	'value'	Ключ объекта, используемый как значение

Events

Event	Type	Description
update:modelValue	(value: string) => void	Значение поля ввода изменилось
select	(item: AutocompleteOption) => void	Вариант выбран
focus	(e: FocusEvent) => void	Поле ввода получило фокус
blur	(e: FocusEvent) => void	Поле ввода потеряло фокус
clear	() => void	Поле ввода очищено

Slots

Slot	Props	Description
option	{ item, index, highlight }	Кастомный рендеринг варианта
prefix	—	Кастомная иконка-префикс