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>

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

Propiedades del componente

Name	Type	Default	Description
ref bindable	HTMLElement		La referencia DOM del elemento contenedor.
inputRef bindable	HTMLInputElement		La referencia del DOM del elemento text box.
value bindable	string	''	El texto actual del box.
open bindable	boolean	false	Controla el estado de apertura de la lista de sugerencias.
multiselect	boolean		Permite elegir más de una sugerencia, y mantiene la lista abierta después de cada una.
selectOnFocus	boolean		Refleja en el text box la sugerencia sobre la que está el cursor a medida que se recorre. No es compatible con `multiselect`.
openOnFocus	boolean	false	Abre la lista de sugerencias en cuanto la caja de texto recibe el foco, en vez de esperar a la primera pulsación. Útil en dispositivos táctiles, que no tienen flechas con las que abrir la lista.
showTextualMultiselect	boolean		Lista en el text box todas las sugerencias elegidas, separadas por comas. Solo en multiselect.
notFoundText	string	'No results found'	El mensaje que se muestra en lugar de la lista cuando no hay coincidencias.
selectedOptions bindable	{ id: string; value: string }[]	[]	Las sugerencias elegidas actualmente.
suggestionChosen	(e: Event, selection: string) => void		Se llama cuando se elige una sugerencia: al hacer clic, al pulsar Enter sobre ella, o al pasar por encima con `selectOnFocus` activo.
querySubmitted	(e: MouseEvent | KeyboardEvent, query: string) => void		Se llama al pulsar Enter sin ninguna sugerencia bajo el cursor, o al hacer clic en el botón de búsqueda. Aquí es donde se obtiene un nuevo conjunto de sugerencias.
virtualizer	AutoSuggestVirtualizer		Puente hacia una lista virtualizada, para conjuntos de sugerencias demasiado largos para renderizarse enteros.
maxItemsInView	number	6	Cuántas sugerencias se ven antes de que la lista tenga scroll.
textBoxRef bindable	HTMLInputElement		La referencia del DOM del input del text box subyacente.
textBoxProps	TextBoxProps		Las props que se aplican al text box.
flyoutRef bindable	HTMLElement		La referencia del DOM del flyout que contiene la lista de sugerencias.
flyoutProps	FlyoutProps		Las props que se aplican al flyout.
listViewRef bindable	HTMLUListElement		La referencia del DOM de la lista de sugerencias.
listViewProps	ListViewItemProps		Las props que se aplican a la lista de sugerencias.
type, placeholder, hideActionButtons, textChanged from TextBoxProps
Element Attributes (div)

Propiedades de AutoSuggestBoxOption

Name	Type	Default	Description
value	string		El valor que se reporta al box cuando se elige la sugerencia. Si no se indica, se usa el id.
text	string		El texto que se muestra en el box una vez elegida la sugerencia. Si no se indica, se usa `value`.
id	string		El id del elemento option, referenciado por el box a través de `aria-activedescendant`. Si no se indica, se genera uno.
ref bindable	HTMLLIElement		La referencia del DOM del elemento option.
disabled	boolean		Deja la sugerencia fuera de alcance: se muestra, pero el cursor la salta.
index	number		La posición de la sugerencia dentro del conjunto completo. Una lista virtualizada necesita el índice real, no la posición dentro del tramo renderizado.
ListViewItemProps<'li'> without as, value