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.

Применение

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

API

v-autocomplete
Имя
allow-overflow
По умолчанию
true
Тип
boolean

Components.Autocompletes.

Имя
append-icon
По умолчанию
'$vuetify.icons.dropdown'
Тип
string

Components.Autocompletes.

Имя
append-outer-icon New in — v1.1
По умолчанию
undefined
Тип
string

Components.Autocompletes.

Имя
attach
По умолчанию
false
Тип
any

Указывает, какой элемент DOM должен отделить этот компонент. Используйте либо селектор CSS, либо ссылку на объект для элемента.

Имя
auto-select-first
По умолчанию
false
Тип
boolean

Components.Autocompletes.

Имя
autofocus
По умолчанию
false
Тип
boolean

Включить автофокусировку

Имя
background-color
По умолчанию
undefined
Тип
string

Components.Autocompletes.

Имя
box
По умолчанию
false
Тип
boolean

Применяет стиль ввода альтернативного ввода

Имя
browser-autocomplete
По умолчанию
'off'
Тип
string

Components.Autocompletes.

Имя
cache-items
По умолчанию
false
Тип
boolean

Сохраняет локальную копию всех элементов, прошедших через свойство items.

Имя
chips
По умолчанию
false
Тип
boolean

Изменяет отображение выбранных chips

Имя
clear-icon
По умолчанию
'$vuetify.icons.clear'
Тип
string

Components.Autocompletes.

Имя
clearable
По умолчанию
false
Тип
boolean

Добавить функциональные возможности ввода, значок по умолчанию - Material Icons *clear

Имя
color
По умолчанию
'primary'
Тип
string

Применяет заданный цвет к элементу управления

Имя
counter
По умолчанию
undefined
Тип
boolean | number | string

Создаёт счётчик для входной длины. Если номер не указан, по умолчанию он равен 25. Не применяется какая-либо проверка.

Имя
dark
По умолчанию
false
Тип
boolean

Применяет тёмный вариант темы

Имя
deletable-chips
По умолчанию
false
Тип
boolean

Добавляет значок удаления в выбранный chips

Имя
dense
По умолчанию
false
Тип
boolean

Уменьшает максимальную высоту элементов списка

Имя
disabled
По умолчанию
false
Тип
boolean

Components.Autocompletes.

Имя
dont-fill-mask-blanks
По умолчанию
false
Тип
boolean

Отключает автоматическое отображение символов при наборе текста

Имя
error
По умолчанию
false
Тип
boolean

Вставляет состояние ошибки в ввод вручную

Имя
error-count
По умолчанию
1
Тип
number | string

Components.Autocompletes.

Имя
error-messages
По умолчанию
[]
Тип
string | array

Вставляет состояние ошибки в ввод и передаёт пользовательские сообщения об ошибках. Будет сочетаться с любыми валидациями, которые возникают из rules. Это поле не инициирует проверку

Имя
filter
По умолчанию
(item: object, queryText: string, itemText: string) => boolean
Тип
function

Components.Autocompletes.

Имя
flat
По умолчанию
false
Тип
boolean

Components.Autocompletes.

Имя
full-width
По умолчанию
false
Тип
boolean

Сбрасывает тип ввода как полную ширину

Имя
height
По умолчанию
undefined
Тип
number | string

Установка высоты компонента

Имя
hide-details
По умолчанию
false
Тип
boolean

Components.Autocompletes.

Имя
hide-no-data
По умолчанию
false
Тип
boolean

Components.Autocompletes.

Имя
hide-selected
По умолчанию
false
Тип
boolean

Не отображать в элементах select , которые уже выбраны

Имя
hint
По умолчанию
undefined
Тип
string

Components.Autocompletes.

Имя
item-avatar
По умолчанию
avatar
Тип
string | array | function

Установить свойству items значение аватара

Имя
item-disabled
По умолчанию
disabled
Тип
string | array | function

Установить свойству items отключено

Имя
item-text
По умолчанию
text
Тип
string | array | function

Установить свойству items значение text

Имя
item-value
По умолчанию
value
Тип
string | array | function

Установить свойству items значение

Имя
items
По умолчанию
[]
Тип
array

Может быть массив объектов или массив строк. При использовании объектов будет искать поле текста и значения. Это можно изменить с помощью item-text и item-value свойств.

Имя
label
По умолчанию
undefined
Тип
string

Components.Autocompletes.

Имя
light
По умолчанию
false
Тип
boolean

Применяет светлый вариант темы

Имя
loading
По умолчанию
false
Тип
boolean | string

Components.Autocompletes.

Имя
mask
По умолчанию
undefined
Тип
object | string

Примените специальную маску на вход. Для получения дополнительной информации см. Таблицу масок выше

Имя
menu-props New in — v1.2
По умолчанию
{"closeOnClick":false, "closeOnContentClick":false, "openOnClick":false, "maxHeight":300}
Тип
string | array | object

Components.Autocompletes.

Имя
messages
По умолчанию
[]
Тип
string | array

Components.Autocompletes.

Имя
multiple
По умолчанию
false
Тип
boolean

Множественные изменения select. Принимает массив для значения

Имя
no-data-text
По умолчанию
'$vuetify.noDataText'
Тип
string

Отображать текст, когда нет данных

Имя
no-filter New in — v1.1
По умолчанию
false
Тип
boolean

Components.Autocompletes.

Имя
open-on-clear
По умолчанию
false
Тип
boolean

При использовании свойства clearable , после очистки, меню выбора будет либо открыто, либо оставаться открытым, в зависимости от текущего состояния

Имя
outline
По умолчанию
false
Тип
boolean

Components.Autocompletes.

Имя
persistent-hint
По умолчанию
false
Тип
boolean

Components.Autocompletes.

Имя
placeholder
По умолчанию
undefined
Тип
string

Components.Autocompletes.

Имя
prefix
По умолчанию
undefined
Тип
string

Отображает префиксный текст

Имя
prepend-icon
По умолчанию
undefined
Тип
string

Components.Autocompletes.

Имя
prepend-inner-icon New in — v1.1
По умолчанию
undefined
Тип
string

Components.Autocompletes.

Имя
readonly
По умолчанию
false
Тип
boolean

Components.Autocompletes.

Имя
return-masked-value
По умолчанию
false
Тип
boolean

Возвращает неизмененную строку в маске

Имя
return-object
По умолчанию
false
Тип
boolean

Изменяет поведение выбора, чтобы вернуть объект напрямую, а не значение, указанное с помощью значения item-value

Имя
reverse New in — v1.1
По умолчанию
false
Тип
boolean

Components.Autocompletes.

Имя
rules
По умолчанию
[]
Тип
array

Массив функций, возвращающих True или String с сообщением об ошибке

Имя
search-input
По умолчанию
undefined
Тип
any

При использовании свойства автозаполнения. Используйте модификатор .sync, чтобы отловить пользовательский ввод из ввода автозаполнения

Имя
single-line
По умолчанию
false
Тип
boolean

Ярлык не перемещается на фокус/dirty

Имя
small-chips New in — v1.1
По умолчанию
false
Тип
boolean

Components.Autocompletes.

Имя
solo
По умолчанию
false
Тип
boolean

Components.Autocompletes.

Имя
solo-inverted
По умолчанию
false
Тип
boolean

Components.Autocompletes.

Имя
success New in — v1.1
По умолчанию
false
Тип
boolean

Components.Autocompletes.

Имя
success-messages New in — v1.1
По умолчанию
[]
Тип
string | array

Components.Autocompletes.

Имя
suffix
По умолчанию
undefined
Тип
string

Отображает суффикс-текста

Имя
type
По умолчанию
'text'
Тип
string

Устанавливает тип ввода

Имя
validate-on-blur
По умолчанию
false
Тип
boolean

Задержка проверки до размытия

Имя
value
По умолчанию
undefined
Тип
any

Контроль видимости

Имя
value-comparator
По умолчанию
(a: any, b: any) => boolean
Тип
function

Применяет пользовательскую функцию сравнения

Дополнительный

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

Примеры

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.

Edit this page | language on Github