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.
API
Components.Autocompletes.
Components.Autocompletes.
Components.Autocompletes.
Указывает, какой элемент DOM должен отделить этот компонент. Используйте либо селектор CSS, либо ссылку на объект для элемента.
Components.Autocompletes.
Включить автофокусировку
Components.Autocompletes.
Применяет стиль ввода альтернативного ввода
Components.Autocompletes.
Сохраняет локальную копию всех элементов, прошедших через свойство items.
Изменяет отображение выбранных chips
Components.Autocompletes.
Добавить функциональные возможности ввода, значок по умолчанию - Material Icons *clear
Применяет заданный цвет к элементу управления
Создаёт счётчик для входной длины. Если номер не указан, по умолчанию он равен 25. Не применяется какая-либо проверка.
Применяет тёмный вариант темы
Добавляет значок удаления в выбранный chips
Уменьшает максимальную высоту элементов списка
Components.Autocompletes.
Отключает автоматическое отображение символов при наборе текста
Вставляет состояние ошибки в ввод вручную
Components.Autocompletes.
Вставляет состояние ошибки в ввод и передаёт пользовательские сообщения об ошибках. Будет сочетаться с любыми валидациями, которые возникают из rules. Это поле не инициирует проверку
Components.Autocompletes.
Components.Autocompletes.
Сбрасывает тип ввода как полную ширину
Установка высоты компонента
Components.Autocompletes.
Components.Autocompletes.
Не отображать в элементах select , которые уже выбраны
Components.Autocompletes.
Установить свойству items значение аватара
Установить свойству items отключено
Установить свойству items значение text
Установить свойству items значение
Может быть массив объектов или массив строк. При использовании объектов будет искать поле текста и значения. Это можно изменить с помощью item-text и item-value свойств.
Components.Autocompletes.
Применяет светлый вариант темы
Components.Autocompletes.
Примените специальную маску на вход. Для получения дополнительной информации см. Таблицу масок выше
Components.Autocompletes.
Components.Autocompletes.
Множественные изменения select. Принимает массив для значения
Отображать текст, когда нет данных
Components.Autocompletes.
При использовании свойства clearable , после очистки, меню выбора будет либо открыто, либо оставаться открытым, в зависимости от текущего состояния
Components.Autocompletes.
Components.Autocompletes.
Components.Autocompletes.
Отображает префиксный текст
Components.Autocompletes.
Components.Autocompletes.
Components.Autocompletes.
Возвращает неизмененную строку в маске
Изменяет поведение выбора, чтобы вернуть объект напрямую, а не значение, указанное с помощью значения item-value
Components.Autocompletes.
Массив функций, возвращающих True или String с сообщением об ошибке
При использовании свойства автозаполнения. Используйте модификатор .sync, чтобы отловить пользовательский ввод из ввода автозаполнения
Ярлык не перемещается на фокус/dirty
Components.Autocompletes.
Components.Autocompletes.
Components.Autocompletes.
Components.Autocompletes.
Components.Autocompletes.
Отображает суффикс-текста
Устанавливает тип ввода
Задержка проверки до размытия
Контроль видимости
Применяет пользовательскую функцию сравнения
Дополнительный
| 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 | ##:##:## |
Примеры
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.