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.
Especifica de cuál elemento del DOM debe soltarse este componente. Utiliza ya sea un selector de CSS o una referencia del objeto que apunta al elemento.
Components.Autocompletes.
Habilita el autoenfoque
Components.Autocompletes.
Aplica un estilo alternativo de box al input
Components.Autocompletes.
Mantiene una copia local única de todos los elementos que han sido pasados a través de la prop items
Cambia el display de las selecciones a chips
Components.Autocompletes.
Agrega funcionalidad de limpiar el input, el ícono default es clear de Material Icons
Aplica el color especificado al control.
Crea un contador para la longitud del input. Si no se especifica un número, el default es 25. No aplica ninguna validación.
Aplica la variante del tema dark
Agrega un ícono de quitar a los chips seleccionados
Reduce la altura máxima de los elementos de la lista
Components.Autocompletes.
Deshabilita que el caracter se muestre en automático al escribir
Pone el input en un estado de error manual
Components.Autocompletes.
Pone el input en un estado de error y pasa los mensajes de error personalizados. Se combinará con cualquier validación que ocurra desde la prop rules. Este campo no propicia ninguna validación.
Components.Autocompletes.
Components.Autocompletes.
Indica el tipo del input como un full-width (ancho total)
Configura la altura del componente
Components.Autocompletes.
Components.Autocompletes.
No mostrar elementos en las opciones que ya hayan sido seleccionados
Components.Autocompletes.
Configura el avatar del elemento
Determina si el elemento está deshabilitado
Configura el texto del elemento
Configura el valor del elemento
Puede ser un arreglo de objetos o un arreglo de strings. Cuando se usan objetos, buscará por campos text y field. Esto puede cambiarse usando las props item-text y item-value
Components.Autocompletes.
Aplica la variante del tema light
Components.Autocompletes.
Aplica un caracter personalizado como máscara del input. Ve a la tabla de máscaras arriba para mayor información
Components.Autocompletes.
Components.Autocompletes.
Cambia a múltiple. Acepta un arreglo.
El texto a mostrar cuando no hay datos.
Components.Autocompletes.
Cuando se usa la prop clearable y ha sido limpiado, el menu del select se abrirá o permanecerá abierto, dependiendo del estado actual
Components.Autocompletes.
Components.Autocompletes.
Components.Autocompletes.
Muestra un texto de prefijo
Components.Autocompletes.
Components.Autocompletes.
Components.Autocompletes.
Regresa la cadena que fue enmascarada sin modificar
Cambia el comportamiento al seleccionar para que regrese un objeto directamente en lugar del valor especificado con item-value
Components.Autocompletes.
Arreglo de funciones que regresa ya sea True o un String con el mensaje de error
Ligado cuando se usa la prop autocomplete. Utiliza el modificador .sync para leer lo que el usuario escribe desde el input de búscada para autocompletar.
La etiqueta no se mueve en los eventos focus/dirty
Components.Autocompletes.
Components.Autocompletes.
Components.Autocompletes.
Components.Autocompletes.
Components.Autocompletes.
Muestra un texto de sufijo
Configura el tipo de input
Retrasa la validación hasta el evento blur
Controla la visibilidad
Components.Autocompletes.
Suplementos
| 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 | ##:##:## |
Ejemplos
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.