Autocompletado

Puede obtener algunas sugerencias basadas en la entrada actual.

TIP

Este componente requiere el envoltorio <client-only></client-only> cuando se utiliza en SSR (por ejemplo: Nuxt) y SSG (por ejemplo: VitePress).

Uso básico

El componente Autocompletar proporciona sugerencias de entrada.

Template personalizado

Personalice cómo se muestran las sugerencias.

Búsqueda remota

Búsqueda de datos desde el servidor.

Custom Loading 2.5.0

Override loading content.

API

Atributos

Nombre	Descripción	Tipo	Por defecto
model-value / v-model	valor enlazado	`string`	—
placeholder	el placeholder del autocompletado	`string`	—
clearable	si desea mostrar el botón de borrar	`boolean`	false
disabled	si el autocompletado está deshabilitado	`boolean`	false
value-key	nombre clave del objeto de sugerencia para mostrar en el input	`string`	value
debounce	retraso de desconexión al teclear, en milisegundos	`number`	300
placement	posición del menú emergente	`enum`	bottom-start
fetch-suggestions	un método para obtener sugerencias del input. Cuando las sugerencias están listas, invoca `callback(data:[])` para devolverlas a Autocompletar	`Function`	—
trigger-on-focus	si mostrar sugerencias cuando el input tenga el foco	`boolean`	true
select-when-unmatched	si se quiere emitir un evento `select` cuando no hay coincidencia de autocompletado	`boolean`	false
name	como `name` en el input nativo	`string`	—
aria-label a11y 2.7.2	native `aria-label` attribute	`string`	—
hide-loading	si se oculta el icono de load en la búsqueda remota	`boolean`	false
popper-class	nombre de clase personalizado para el menú desplegable de autocompletado	`string`	—
popper-append-to-body deprecated	si añadir el menú desplegable al body. Si la posición del desplegable es incorrecta, puede intentar establecer esta propiedad a false	`boolean`	false
teleported	si el desplegable de selección se teletransporta al body	`boolean`	true
highlight-first-item	si por defecto se destacara el primer elemento en las sugerencias de búsqueda remota	`boolean`	false
fit-input-width	si el ancho del desplegable es el mismo que el del input	`boolean`	false

Eventos

Nombre	Descripción	Tipo
select	se dispara cuando se hace clic en una sugerencia	`Function`
change	se dispara cuando el icono dentro del valor de entrada cambia	`Function`

Slots

Nombre	Descripción	Tipo
default	custom content for input suggestions	`object`
prefix	contenido como prefijo del input	-
suffix	contenido como sufijo del input	-
prepend	contenido a anteponer al input	-
append	contenido para añadir después del input	-
loading 2.5.0	override loading content	-

Expuesto

Nombre	Descripción	Type
activated	si se activa el autocompletado	`object`
blur	quita el foco en el input	`Function`
close	contraer lista de sugerencias	`Function`
focus	coloca el foco en el elemento	`Function`
handleSelect	se dispara cuando se hace clic en una sugerencia	`Function`
handleKeyEnter	manejar evento de entrada de teclado	`Function`
highlightedIndex	el índice del elemento actualmente destacado	`object`
highlight	destacar un elemento en una sugerencia	`Function`
inputRef	instancia del componente el-input	`object`
loading	indicador de carga de búsqueda remota	`object`
popperRef	instancia del componente el-tooltip	`object`
suggestions	obtener resultados de sugerencias	`object`