Skip to main content

​
VAutocomplete

The VAutocomplete component provides a searchable dropdown that filters items as the user types. It extends VTextField with autocomplete functionality, supporting both single and multiple selection modes.

​
Basic Usage

<template>
  <VAutocomplete
    v-model="selected"
    :items="items"
    label="Select an item"
  />
</template>

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

const selected = ref(null)
const items = ['California', 'Colorado', 'Florida', 'Georgia', 'Texas']
</script>

​
Props

​
autoSelectFirst
boolean | 'exact'
Automatically select the first item when the menu opens. If set to ‘exact’, only selects when the search value exactly matches the item title.
​
clearOnSelect
boolean
default:"false"
Clear the search input after selecting an item (useful with multiple mode).
​
search
string
The current search query. Can be bound with v-model:search.
​
items
readonly any[]
Array of items to display in the dropdown.
​
itemTitle
string | function
Property name or function to determine the display text for each item.
​
itemValue
string | function
Property name or function to determine the value for each item.
​
returnObject
boolean
default:"false"
Return the entire item object as the value instead of just the item value.
​
multiple
boolean
default:"false"
Allow multiple item selection.
​
chips
boolean
default:"false"
Display selected items as chips.
​
closableChips
boolean
default:"false"
Allow chips to be closed/removed.
​
hideSelected
boolean
default:"false"
Hide selected items from the list.
​
hideNoData
boolean
default:"false"
Hide the menu when there are no items to display.
​
menuIcon
string
default:"$dropdown"
Icon to display for the dropdown menu indicator.
​
noDataText
string
default:"$vuetify.noDataText"
Text to display when no items match the search.
​
filterKeys
string[]
default:"['title']"
Item properties to use when filtering.
​
openOnClear
boolean
default:"false"
Open the menu when the clear icon is clicked.

​
Multiple Selection

<template>
  <VAutocomplete
    v-model="selected"
    :items="items"
    label="Select multiple"
    multiple
    chips
    closable-chips
  />
</template>

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

const selected = ref([])
const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5']
</script>

​
Custom Filtering

<template>
  <VAutocomplete
    v-model="selected"
    :items="items"
    item-title="name"
    item-value="id"
    label="Search users"
    :filter-keys="['name', 'email']"
  />
</template>

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

const selected = ref(null)
const items = [
  { id: 1, name: 'John Doe', email: '[email protected]' },
  { id: 2, name: 'Jane Smith', email: '[email protected]' },
  { id: 3, name: 'Bob Johnson', email: '[email protected]' },
]
</script>

​
Auto Select First

<template>
  <VAutocomplete
    v-model="selected"
    :items="items"
    label="Auto select first"
    auto-select-first
  />
</template>

​
Events

​
update:modelValue
(value: any) => void
Emitted when the selected value changes.
​
update:search
(value: string) => void
Emitted when the search query changes.
​
update:menu
(value: boolean) => void
Emitted when the menu opens or closes.
​
update:focused
(focused: boolean) => void
Emitted when the input focus state changes.

​
Slots

​
item
{ item, index, props }
Customize the appearance of list items.
​
chip
{ item, index, props }
Customize the appearance of selected chips.
​
selection
{ item, index }
Customize how selected items are displayed.
​
no-data
{}
Content to display when no items are available.
​
prepend-item
{}
Content to display before the list items.
​
append-item
{}
Content to display after the list items.

Build docs developers (and LLMs) love

Get started for freeTalk to us