Autocomplete

Input with suggestions dropdown. Filters options as you type with keyboard navigation.

<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

Pass objects with value and label fields.

<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

Listen to @select to get the full selected item.

<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

Show all suggestions when the input is focused, even without typing.

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

Remote / Async

Use fetch-suggestions for async data fetching. Pairs well with 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	''	Input value (v-model)
options	string[] | AutocompleteOption[]	[]	Static options list
placeholder	string	''	Placeholder text
disabled	boolean	false	Disable input
clearable	boolean	false	Show clear button
size	'sm' | 'default' | 'lg'	'default'	Input size
debounce	number	0	Debounce delay in ms
highlight	boolean	true	Highlight matched text
emptyText	string	'No results'	Text when no matches
fetchSuggestions	(query: string) => Option[] | Promise<Option[]>	—	Async fetch function
triggerOnFocus	boolean	false	Show suggestions on focus
valueKey	string	'value'	Key to use as value from option object

Events

Event	Type	Description
update:modelValue	(value: string) => void	Input value changed
select	(item: AutocompleteOption) => void	Option selected
focus	(e: FocusEvent) => void	Input focused
blur	(e: FocusEvent) => void	Input blurred
clear	() => void	Input cleared

Slots

Slot	Props	Description
option	{ item, index, highlight }	Custom option rendering
prefix	—	Custom prefix icon