Autocomplete

The v-autocomplete component offers simple and flexible type-ahead functionality. This is useful when searching large sets of data or even dynamically requesting information from an API.

Utilização

The autocomplete component extends v-select and adds the ability to filter items.

API

Nome

allow-overflow

Padrão

true

Tipos

boolean

Components.Autocompletes.

Nome

append-icon

Padrão

'$vuetify.icons.dropdown'

Tipos

string

Components.Autocompletes.

Nome

append-outer-icon New in — v1.1

Padrão

undefined

Tipos

string

Components.Autocompletes.

Nome

attach

Padrão

false

Tipos

any

Components.Autocompletes.

Nome

auto-select-first

Padrão

false

Tipos

boolean

Components.Autocompletes.

Nome

autofocus

Padrão

false

Tipos

boolean

Habilita focagem automática

Nome

background-color

Padrão

undefined

Tipos

string

Components.Autocompletes.

Nome

box

Padrão

false

Tipos

boolean

Aplica o estilo em caixa alternativo para o campo de entrada

Nome

browser-autocomplete

Padrão

'off'

Tipos

string

Components.Autocompletes.

Nome

cache-items

Padrão

false

Tipos

boolean

Components.Autocompletes.

Nome

chips

Padrão

false

Tipos

boolean

Components.Autocompletes.

Nome

clear-icon

Padrão

'$vuetify.icons.clear'

Tipos

string

Components.Autocompletes.

Nome

clearable

Padrão

false

Tipos

boolean

Adicionar a funcionalidade de limpar o input, ícone padrão é usa o clear do Material Icons

Nome

color

Padrão

'primary'

Tipos

string

Components.Autocompletes.

Nome

counter

Padrão

undefined

Tipos

boolean | number | string

Cria um contador para o tamanho da entrada. O padrão é 25 se nenhum número for especificado. Não é aplicada nenhuma validação.

Nome

dark

Padrão

false

Tipos

boolean

Components.Autocompletes.

Nome

deletable-chips

Padrão

false

Tipos

boolean

Components.Autocompletes.

Nome

dense

Padrão

false

Tipos

boolean

Components.Autocompletes.

Nome

disabled

Padrão

false

Tipos

boolean

Components.Autocompletes.

Nome

dont-fill-mask-blanks

Padrão

false

Tipos

boolean

Desativa a exibição automática de caracteres ao digitar

Nome

error

Padrão

false

Tipos

boolean

Components.Autocompletes.

Nome

error-count

Padrão

Tipos

number | string

Components.Autocompletes.

Nome

error-messages

Padrão

[]

Tipos

string | array

Components.Autocompletes.

Nome

filter

Padrão

(item: object, queryText: string, itemText: string) => boolean

Tipos

function

Components.Autocompletes.

Nome

flat

Padrão

false

Tipos

boolean

Components.Autocompletes.

Nome

full-width

Padrão

false

Tipos

boolean

Designa o tipo da entrada com largura total

Nome

height

Padrão

undefined

Tipos

number | string

Define a altura do componente

Nome

hide-details

Padrão

false

Tipos

boolean

Components.Autocompletes.

Nome

hide-no-data

Padrão

false

Tipos

boolean

Components.Autocompletes.

Nome

hide-selected

Padrão

false

Tipos

boolean

Components.Autocompletes.

Nome

hint

Padrão

undefined

Tipos

string

Components.Autocompletes.

Nome

item-avatar

Padrão

avatar

Tipos

string | array | function

Components.Autocompletes.

Nome

item-disabled

Padrão

disabled

Tipos

string | array | function

Components.Autocompletes.

Nome

item-text

Padrão

text

Tipos

string | array | function

Components.Autocompletes.

Nome

item-value

Padrão

value

Tipos

string | array | function

Components.Autocompletes.

Nome

items

Padrão

[]

Tipos

array

Components.Autocompletes.

Nome

label

Padrão

undefined

Tipos

string

Components.Autocompletes.

Nome

light

Padrão

false

Tipos

boolean

Components.Autocompletes.

Nome

Padrão

false

Tipos

boolean | string

Components.Autocompletes.

Nome

mask

Padrão

undefined

Tipos

object | string

Aplica uma máscara personalizada no input. Para mais informações, veja a tabela de máscaras abaixo

Nome

menu-props New in — v1.2

Padrão

{"closeOnClick":false, "closeOnContentClick":false, "openOnClick":false, "maxHeight":300}

Tipos

string | array | object

Components.Autocompletes.

Nome

messages

Padrão

[]

Tipos

string | array

Components.Autocompletes.

Nome

multiple

Padrão

false

Tipos

boolean

Components.Autocompletes.

Nome

no-data-text

Padrão

'$vuetify.noDataText'

Tipos

string

Components.Autocompletes.

Nome

no-filter New in — v1.1

Padrão

false

Tipos

boolean

Components.Autocompletes.

Nome

open-on-clear

Padrão

false

Tipos

boolean

Components.Autocompletes.

Nome

outline

Padrão

false

Tipos

boolean

Components.Autocompletes.

Nome

persistent-hint

Padrão

false

Tipos

boolean

Components.Autocompletes.

Nome

placeholder

Padrão

undefined

Tipos

string

Components.Autocompletes.

Nome

prefix

Padrão

undefined

Tipos

string

Exibe um texto como prefixo

Nome

prepend-icon

Padrão

undefined

Tipos

string

Components.Autocompletes.

Nome

prepend-inner-icon New in — v1.1

Padrão

undefined

Tipos

string

Components.Autocompletes.

Nome

readonly

Padrão

false

Tipos

boolean

Components.Autocompletes.

Nome

return-masked-value

Padrão

false

Tipos

boolean

Retorna a string mascarada não modificada

Nome

return-object

Padrão

false

Tipos

boolean

Components.Autocompletes.

Nome

reverse New in — v1.1

Padrão

false

Tipos

boolean

Components.Autocompletes.

Nome

rules

Padrão

[]

Tipos

array

Components.Autocompletes.

Nome

search-input

Padrão

undefined

Tipos

any

Components.Autocompletes.

Nome

single-line

Padrão

false

Tipos

boolean

Label não se move em eventos focus/dirty

Nome

small-chips New in — v1.1

Padrão

false

Tipos

boolean

Components.Autocompletes.

Nome

solo

Padrão

false

Tipos

boolean

Components.Autocompletes.

Nome

solo-inverted

Padrão

false

Tipos

boolean

Components.Autocompletes.

Nome

success New in — v1.1

Padrão

false

Tipos

boolean

Components.Autocompletes.

Nome

success-messages New in — v1.1

Padrão

[]

Tipos

string | array

Components.Autocompletes.

Nome

suffix

Padrão

undefined

Tipos

string

Exibe um texto como sufixo

Nome

type

Padrão

'text'

Tipos

string

Seta o tipo do campo de entrada

Nome

validate-on-blur

Padrão

false

Tipos

boolean

Components.Autocompletes.

Nome

value

Padrão

undefined

Tipos

any

Controla visibilidade

Nome

value-comparator

Padrão

(a: any, b: any) => boolean

Tipos

function

Components.Autocompletes.

Suplementar

**Mask legend**
Mask	Description
Masks
#	Any digit
A	Any capital letter
a	Any small letter
N	Any capital alphanumeric character
n	Any small alphanumeric character
X	Any special symbol (-!$%^&*()_+\|~=`{}[]:";'<>?,./\) or space
Pre-made
credit-card	#### - #### - #### - ####
date-with-time	##/##/#### ##:##
phone	(###) ### - ####
social	###-##-####
time	##:##
time-with-seconds	##:##:##

Exemplos

Searching an API

Easily hook up dynamic data and create a unique experience. The v-autocomplete's expansive prop list makes it easy to fine tune every aspect of the input.

Scoped slots

With the power of scoped slots, you can customize the visual output of the select. In this example we add a profile picture for both the chips and list items.

Custom filter on autocomplete

The filter prop can be used to filter each individual item with custom logic. In this example we filter items by name

Asynchronous items

Sometimes you need to load data externally based upon a search query. Use the search-input prop with the .sync modifier when using the autocomplete prop. We also make use of the new cache-items prop. This will keep a unique list of all items that have been passed to the items prop and is REQUIRED when using asynchronous items and the multiple prop.

Advanced slots

The v-autocomplete component is extremely flexible and can fit in just about any use-case. Create custom displays for no-data, item and selection slots to provide a unique user experience. Using scoped slots enables you to easily customize the desired look for your application.

Up Next

Edit this page | language on Github

— Contribution Guide