@atmgrupomaggioli/iris-autocomplete

Iris Autocomplete

Overview

Componente diseñado para facilitar la selección de opciones mediante sugerencias dinámicas mientras el usuario escribe en un campo de texto. Está especialmente pensado para mejorar la experiencia de entrada de datos en formularios o procesos donde el usuario necesita buscar y seleccionar información de manera rápida y eficiente.

A medida que el usuario introduce texto, el componente consulta de forma asíncrona una fuente de datos y presenta una lista de sugerencias relevantes.

Las sugerencias se muestran en un panel desplegable bajo el campo de texto, con soporte para navegación tanto con el teclado como con el ratón. El usuario puede navegar por las opciones, seleccionarlas fácilmente, o lanzar una búsqueda avanzada si la opción deseada no aparece.

Este componente es ideal para formularios complejos, buscadores y filtros avanzados.

Proporciona también métodos públicos para interactuar con el componente desde el exterior y eventos personalizados para integrarlo fácilmente en cualquier flujo de la aplicación.

Properties

Property	Attribute	Description	Type	Default
delay	delay	Retardo en milisegundos antes de lanzar la búsqueda.	number	getGlobalComponentConfig('IrisAutocomplete')?.delay || 1500
disabled	disabled	Permite deshabilitar el componente	boolean	getGlobalComponentConfig('IrisAutocomplete')?.disabled || false
displayKey	display-key	Clave del objeto de sugerencia que se usará como texto visible en la lista	string	getGlobalComponentConfig('IrisAutocomplete')?.displayKey || 'text'
fetchSuggestions (required)	fetch-suggestions	Función para obtener los resultados del autocomplete desde el servidor	(query: string) => object[] | Promise<object[]>	undefined
inputType	input-type	Tipo del input	"email" | "nifcif" | "number" | "password" | "tel" | "text" | "url"	getGlobalComponentConfig('IrisAutocomplete')?.inputType || 'text'
label (required)	label	Label del input	string	undefined
minChars	min-chars	Cantidad mínima de caracteres necesarios para activar la búsqueda	number	getGlobalComponentConfig('IrisAutocomplete')?.minChars || 3
name	name	Nombre del input	string	getGlobalComponentConfig('IrisAutocomplete')?.name
placeholder	placeholder	Texto de placeholder cuando el input está vacío	string	getGlobalComponentConfig('IrisAutocomplete')?.placeholder
required	required	Indica si el campo es requerido	boolean	getGlobalComponentConfig('IrisAutocomplete')?.required || false
rules	rules	Reglas de validación adicionales	Rule[]	getGlobalComponentConfig('IrisAutocomplete')?.rules
showButton	show-button	Permite mostrar un botón de búsqueda avanzada	boolean	getGlobalComponentConfig('IrisAutocomplete')?.showButton || false
tooltip	tooltip	Texto del tooltip	string | string[]	getGlobalComponentConfig('IrisAutocomplete')?.tooltip
width	width	Ancho del input	string	getGlobalComponentConfig('IrisAutocomplete')?.width || '100%'

Events

Event	Description	Type
advancedSearch	Evento emitido al hacer clic en el botón de búsqueda avanzada.	CustomEvent<any>
ready	Evento lanzado cuando el componente está complementamente listo.	CustomEvent<void>
valueSelected	Evento emitido al seleccionar una sugerencia.	CustomEvent<object>

Methods

clear() => Promise<void>

Limpia completamente el estado del componente

Returns

Type: Promise<void>

getSelectedSuggestion() => Promise<object>

Obtiene la sugerencia seleccionada

Returns

Type: Promise<object>

Sugerencia seleccionada

getValue() => Promise<string>

Obtiene el valor del input

Returns

Type: Promise<string>

Valor del input

setValue() => Promise<void>

Establece el valor del campo de entrada con la sugerencia seleccionada

Returns

Type: Promise<void>

validate() => Promise<boolean>

Comprueba si el campo tiene una selección válida

Returns

Type: Promise<boolean>

true = Válido / false / No válido.

---