AutoSuggestBox Beta

The AutoSuggestBox component provides an input field with dynamic suggestions as users type. It enhances user experience by offering relevant suggestions, improving efficiency in form inputs and searches.

Usage

<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>

Suggestions are provided as AutoSuggestBoxOption a children of the AutoSuggestBox. As the user types, matching options will be shown.

Component Props

Name	Type	Default	Description
ref bindable	HTMLElement		The DOM reference of the wrapper element.
inputRef bindable	HTMLInputElement		The DOM reference of the text box element.
value bindable	string	''	The current text of the box.
open bindable	boolean	false	Controls the open state of the suggestion list.
multiselect	boolean		Lets more than one suggestion be chosen, and keeps the list open after each one.
selectOnFocus	boolean		Mirrors the suggestion under the cursor into the text box as it is walked over. Not supported together with `multiselect`.
openOnFocus	boolean	false	Opens the suggestion list as soon as the text box takes focus, instead of waiting for the first keystroke. Useful on touch devices, which have no arrow key to open the list with.
showTextualMultiselect	boolean		Lists every chosen suggestion in the text box, comma separated. Multiselect only.
notFoundText	string	'No results found'	The message shown in place of the list when nothing matches.
selectedOptions bindable	{ id: string; value: string }[]	[]	The suggestions currently chosen.
suggestionChosen	(e: Event, selection: string) => void		Called when a suggestion is chosen: by clicking it, by pressing Enter on it, or by walking onto it while `selectOnFocus` is set.
querySubmitted	(e: MouseEvent | KeyboardEvent, query: string) => void		Called when Enter is pressed with no suggestion under the cursor, or when the search button is clicked. This is where a fresh set of suggestions is fetched.
virtualizer	AutoSuggestVirtualizer		Bridge to a windowed list, for suggestion sets too long to render whole.
maxItemsInView	number	6	How many suggestions are visible before the list scrolls.
textBoxRef bindable	HTMLInputElement		The DOM reference of the underlying text box input.
textBoxProps	TextBoxProps		The props to spread on the text box.
flyoutRef bindable	HTMLElement		The DOM reference of the flyout holding the suggestion list.
flyoutProps	FlyoutProps		The props to spread on the flyout.
listViewRef bindable	HTMLUListElement		The DOM reference of the suggestion list.
listViewProps	ListViewItemProps		The props to spread on the suggestion list.
type, placeholder, hideActionButtons, textChanged from TextBoxProps
Element Attributes (div)

AutoSuggestBoxOption Props

Name	Type	Default	Description
value	string		The value reported to the box when the suggestion is chosen. Falls back to the id.
text	string		The text shown in the box once the suggestion is chosen. Falls back to `value`.
id	string		The id of the option element, referenced by the box through `aria-activedescendant`. Falls back to a generated id.
ref bindable	HTMLLIElement		The DOM reference of the option element.
disabled	boolean		Takes the suggestion out of reach: it is shown, but the cursor steps over it.
index	number		Where the suggestion sits in the whole set. A windowed list needs the real index, not the position within the rendered slice.
ListViewItemProps<'li'> without as, value