AutoSuggestBox Beta

El componente AutoSuggestBox proporciona un campo de entrada con sugerencias dinámicas a medida que el usuario escribe. Mejora la experiencia del usuario al ofrecer sugerencias relevantes, optimizando así la entrada de formularios y las búsquedas.

Uso

<script>
	import { AutoSuggestBox } from 'fluentui-svelte';
</script>

<AutoSuggestBox placeholder="Type a fruit...">
	<AutoSuggestBoxOption index={0} value="Apple">Apple</AutoSuggestBoxOption>
	<AutoSuggestBoxOption index={1} value="Banana">Banana</AutoSuggestBoxOption>
	<AutoSuggestBoxOption index={2} value="Cherry">Cherry</AutoSuggestBoxOption>
</AutoSuggestBox>

API del Componente

Una breve explicación de las propiedades que realmente necesitan explicación. Puedes ver el resto de las propiedades aquí.

Sugerencias

Las sugerencias se proporcionan como elementos hijos <AutoSuggestBoxOption> del AutoSuggestBox. A medida que el usuario escribe, se mostrarán las opciones coincidentes.

Máximo de Elementos Visibles

La propiedad `maxItemsInView` establece cuántas sugerencias son visibles antes de que el flyout se desplace. Si el número de opciones excede este valor, aparecerá una barra de desplazamiento.

Evento de Sugerencia Elegida

El evento `suggestionChosen` se activa cuando un usuario selecciona una sugerencia de la lista. El valor de la sugerencia elegida se pasa como segundo argumento.

Evento de Consulta Enviada

El evento `querySubmitted` se activa cuando el usuario envía una consulta a través del Botón de Búsqueda o típicamente al presionar Enter. Este evento puede usarse para manejar el envío del valor actual de la entrada.

Propiedades del Componente

Name	Type	Description
placeholder	string	Texto de marcador de posición mostrado en la entrada.
value	string	El valor actual del campo de entrada.
open	boolean	Indica si el flyout de sugerencias está abierto. Predeterminado: `false`.
multiselect	boolean	Permite seleccionar múltiples sugerencias.
selectOnFocus	boolean	Selecciona una sugerencia mientras recibe el foco durante la navegación por teclado.
notFoundText	string	Texto mostrado cuando ninguna sugerencia coincide. Predeterminado: `No results found`.
maxItemsInView	number	Número de sugerencias visibles antes de que el flyout se desplace. Predeterminado: `6`.
ref	HTMLElement	La referencia DOM del elemento auto-suggest box.
suggestionChosen	(e: Event, selection: string) => void	Evento activado cuando se elige una sugerencia.
querySubmitted	(e: MouseEvent | KeyboardEvent, query: string) => void	Evento activado cuando se envía una consulta.