AutoSuggestBox New

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.

Navegación por Teclado

Los usuarios pueden navegar por las sugerencias usando las teclas de flecha Arriba y Abajo. Al presionar Enter se selecciona la sugerencia resaltada.

Forma

Usa shape: rounded (predeterminada), square o circular.

Ver Código

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

<AutoSuggestBox shape="rounded" aria-label="rounded" placeholder="rounded" />
<AutoSuggestBox shape="square" aria-label="square" placeholder="square" />
<AutoSuggestBox shape="circular" aria-label="circular" placeholder="circular" />

Abrir al enfocar

Usa la propiedad openOnFocus para mostrar sugerencias en cuanto la caja de texto recibe el foco, antes de escribir.

Ver Código

<AutoSuggestBox openOnFocus placeholder="Choose a fruit...">
  {#each fruits as fruit, index (fruit.id)}
    <AutoSuggestBoxOption {index} id={fruit.id} value={fruit.name}>
      {fruit.name}
    </AutoSuggestBoxOption>
  {/each}
</AutoSuggestBox>

Virtualización

Renderiza por ventanas conjuntos grandes de sugerencias conectando AutoSuggestBox a una lista virtual mediante la propiedad virtualizer.

Ver Código

<script lang="ts">
  import SvelteVirtualList from '@humanspeak/svelte-virtual-list';

  let listRef = $state<ReturnType<typeof SvelteVirtualList> | null>(null);
</script>

<AutoSuggestBox
  placeholder="Type a name..."
  virtualizer={{
    size: people.length,
    scrollToTop: () => listRef?.scroll({ index: 0, align: 'top', smoothScroll: false }),
    scrollToBottom: () => listRef?.scroll({ index: people.length - 1, align: 'bottom', smoothScroll: false }),
    scrollToIndex: (index) => listRef?.scroll({ index, align: 'auto', smoothScroll: false })
  }}
>
  <SvelteVirtualList items={people} bind:this={listRef} defaultEstimatedItemHeight={30}>
    {#snippet renderItem(person, index)}
      <AutoSuggestBoxOption {index} id={person.id} value={person.name}>
        {person.name}
      </AutoSuggestBoxOption>
    {/snippet}
  </SvelteVirtualList>
</AutoSuggestBox>

Selección múltiple

Permite elegir varias sugerencias y, opcionalmente, muestra los valores seleccionados en la caja de texto.

Ver Código

<script lang="ts">
  let selectedOptions = $state<{ id: string; value: string }[]>([]);
</script>

<AutoSuggestBox multiselect showTextualMultiselect bind:selectedOptions placeholder="Choose fruits...">
  {#each fruits as fruit, index (fruit.id)}
    <AutoSuggestBoxOption {index} id={fruit.id} value={fruit.name}>
      {fruit.name}
    </AutoSuggestBoxOption>
  {/each}
</AutoSuggestBox>

Virtualización con filtrado

Una lista virtualizada debe filtrar sus propios datos e informar la longitud filtrada mediante virtualizer.size.

Ver Código

<script lang="ts">
  import SvelteVirtualList from '@humanspeak/svelte-virtual-list';

  let items = $state.raw(people);
  let listRef = $state<ReturnType<typeof SvelteVirtualList> | null>(null);
</script>

<AutoSuggestBox
  placeholder="Type a name..."
  virtualizer={{
    size: items.length,
    scrollToTop: () => listRef?.scroll({ index: 0, align: 'top', smoothScroll: false }),
    scrollToBottom: () => {
      if (items.length) listRef?.scroll({ index: items.length - 1, align: 'bottom', smoothScroll: false });
    },
    scrollToIndex: (index) => listRef?.scroll({ index, align: 'auto', smoothScroll: false })
  }}
  textChanged={(_, value) => {
    const query = value.trim().toLowerCase();
    items = people.filter(({ name }) => name.toLowerCase().includes(query));
  }}
>
  <SvelteVirtualList {items} bind:this={listRef} defaultEstimatedItemHeight={30}>
    {#snippet renderItem(person, index)}
      <AutoSuggestBoxOption {index} id={person.id} value={person.name}>
        {person.name}
      </AutoSuggestBoxOption>
    {/snippet}
  </SvelteVirtualList>
</AutoSuggestBox>

Atributos de los controles de formulario

Los atributos y eventos se aplican al campo nativo del formulario; ref permite acceder a él. Para el contenedor, usa wrapperAttributes y wrapperRef.

Propiedades del componente

Name	Type	Default	Description
`wrapperRef` bindable	`HTMLDivElement` \| `null`		La referencia DOM del elemento contenedor.
`ref` bindable	`HTMLInputElement` \| `null`		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. Enter además envía el formulario con el texto escrito, salvo que se prevenga el evento.
`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.
`wrapperAttributes`	`HTMLAttributes`		Los atributos que se aplican al elemento wrapper.
`flyoutRef` bindable	`HTMLElement` \| `null`		La referencia del DOM del flyout que contiene la lista de sugerencias.
`flyoutProps`	`FlyoutProps`		Las props que se aplican al flyout.
`listViewRef` bindable	`HTMLUListElement` \| `null`		La referencia del DOM de la lista de sugerencias.
`listViewProps`	`ListViewItemProps`		Las props que se aplican a la lista de sugerencias.
`shape`, `type`, `placeholder`, `hideActionButtons`, `textChanged`, `onClear` from `TextBoxProps`
`HTMLInputAttributes` without `value`, `type`, `role`, `size`, `placeholder`

Propiedades de AutoSuggestBoxOption

Name	Type	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` \| `null`	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`

Componentes

AutoSuggestBox New

Uso

Navegación por Teclado

Forma

Abrir al enfocar

Virtualización

Selección múltiple

Virtualización con filtrado

Atributos de los controles de formulario

Propiedades del componente

Propiedades de AutoSuggestBoxOption