Autocomplete
The FluentAutocomplete component is not yet fully compatible with theEditFormandFluentEditFormelements. Some functionalities, such as error messages, the requirement message or the validation messages are missing.
Examples
Default
Selected:
When the MaxAutoHeight attribute is set, the component adapts its height in relation to the selected elements.
Download:
Customized options
Selected:
Download:
Multiple == false
Selected:
Download:
Many Items
This example shows how you can use ImmediateDelay to control the delay between the user input and the search for options. A value of 0 means no delay
Selected:
Download:
Close via code
This example demonstrates how to close the dropdown in code.
Selected:
Download:
Different object instances from search results
By default the FluentAutocomplete component compares the search results by instance with it's internal selected items. You can control that behaviour by providing the OptionComparer parameter.
Without
Marvin Klein
OptionComparer:
With
Marvin Klein
OptionComparer:
Download:
Documentation
FluentAutocomplete<TOption> Class
Parameters
Name | Type | Default | Description |
|---|---|---|---|
Appearance | FluentInputAppearance | Outline | Gets or sets the visual appearance. See Appearance |
AriaLabel | string? | Gets or sets the text used on aria-label attribute. | |
AutoComplete | string? | Specifies whether a form or an input field should have autocomplete 'on' or 'off' or another value. An Id value must be set to use this property. | |
Autofocus | bool | False | Determines if the element should receive document focus on page load. |
ChangeOnEnterOnly | bool | False | Gets or sets whether using the up and down arrow keys should change focus and select immediately or that selection is done only on Enter. ⚠️ Only applicable in single select scenarios. |
ChildContent | RenderFragment? | Gets or sets the content to be rendered inside the component. In this case list of FluentOptions | |
Disabled | bool | False | Disables the form control, ensuring it doesn't participate in form submission. |
DisplayName | string? | Gets or sets the display name for this field. | |
Embedded | bool | False | Gets or sets if the derived component is embedded in another component. If true, the ClassValue property will not include the EditContext's FieldCssClass. |
Field | FieldIdentifier? | Gets or sets the FluentInputBase that identifies the bound value.If set, this parameter takes precedence over FluentInputBase. | |
FooterContent | RenderFragment<HeaderFooterContent<TOption>>? | Gets or sets the footer content, placed at the bottom of the popup panel. | |
HeaderContent | RenderFragment<HeaderFooterContent<TOption>>? | Gets or sets the header content, placed at the top of the popup panel. | |
Height | string? | Gets or sets the height of the component or of the popup panel. | |
IconDismiss | Icon? | Preview:
| Gets or sets the icon used for the Clear button. By default: Dismiss icon. |
IconSearch | Icon? | Preview:
| Gets or sets the icon used for the Search button. By default: Search icon. |
Immediate | bool | False | Change the content of this input field when the user write text (based on 'OnInput' HTML event). |
ImmediateDelay | int | 0 | Gets or sets the delay, in milliseconds, before to raise the FluentInputBase event. |
Items | IEnumerable<TOption>? | Gets or sets the content source of all items to display in this list. Each item must be instantiated (cannot be null). | |
ItemSize | float | 50 | This is applicable only when using FluentAutocomplete. It defines an expected height in pixels foreach row, allowing the virtualization mechanism to fetch the correct number of items to match the display size and to ensure accurate scrolling. |
KeepOpen | bool | False | Gets or sets whether the drop-down panel stays open after selecting an item, until the number of selected items reaches the maximum (only using the mouse). |
Label | string? | Gets or sets the text to label the input. This is usually displayed just above the input | |
LabelTemplate | RenderFragment? | Gets or sets the content to label the input component. This is usually displayed just above the input | |
MaxAutoHeight | string? | Gets or sets the maximum height of the field to adjust its height in relation to selected elements. | |
MaximumOptionsSearch | int | 9 | Gets or sets the number of maximum options (items) returned by FluentAutocomplete.Default value is 9. |
MaximumSelectedOptions | int? | Gets or sets the maximum number of options (items) selected. Exceeding this value requires the user to delete some elements in order to select new ones. See the FluentAutocomplete. | |
MaximumSelectedOptionsMessage | RenderFragment? | Gets or sets the message displayed when the FluentAutocomplete is reached. | |
Multiple | bool | True | If true, the user can select multiple elements. ⚠️ Only available for the FluentSelect and FluentListbox components. |
Name | string? | Gets or sets the name of the element. Allows access by name from the associated form. ⚠️ This value needs to be set manually for SSR scenarios to work correctly. | |
OptionClass | string? | Gets or sets the css class applied to all FluentOption of the component. | |
OptionComparer | IEqualityComparer<TOption>? | Gets or sets the Generic.IEqualityComparer used to determine if an option is already added to the internal list.⚠️ Only available when Multiple = true. | |
OptionDisabled | Func<TOption, bool>? | Gets or sets the function used to determine if an option is disabled. | |
OptionSelected | Func<TOption, bool>? | Gets or sets the function used to determine if an option is initially selected. | |
OptionStyle | string? | Gets or sets the style applied to all FluentOption of the component. | |
OptionTemplate | RenderFragment<TOption>? | Gets or sets the template for the ListComponentBase items. | |
OptionText | Func<TOption, string> | Gets or sets the function used to determine which text to display for each option. | |
OptionValue | Func<TOption, string> | Gets or sets the function used to determine which value to return for the selected item. Only for FluentListbox and FluentSelect components. | |
Placeholder | string? | Gets or sets the short hint displayed in the input before the user enters a value. | |
Position | SelectPosition? | Gets or sets the position of the options popup. | |
ReadOnly | bool | False | When true, the control will be immutable by user interaction. readonly HTML attribute for more information. |
Required | bool | False | Gets or sets a value indicating whether the element needs to have a value. |
SelectedOption | TOption? | Gets or sets the selected item. ⚠️ Only available when Multiple = false. | |
SelectedOptionExpression | Expression<Func<TOption>>? | Gets or sets an expression that identifies the bound selected options. ⚠️ Only available when Multiple = false. | |
SelectedOptions | IEnumerable<TOption>? | Gets or sets all selected items. ⚠️ Only available when Multiple = true. | |
SelectedOptionsExpression | Expression<Func<IEnumerable<TOption>>>? | Gets or sets an expression that identifies the bound selected options. ⚠️ Only available when Multiple = true. | |
SelectedOptionTemplate | RenderFragment<TOption>? | Gets or sets the template for the ListComponentBase items. | |
SelectValueOnTab | bool | False | Gets or sets whether the currently selected item from the drop-down (if it is open) is selected. Default is false. |
ShowOverlayOnEmptyResults | bool | True | Gets or sets whether the dropdown is shown when there are no items. |
ShowProgressIndicator | bool | False | Gets or sets whether the component will display a progress indicator while fetching data. A progress ring will be shown ad the end of the component, when the FluentAutocomplete is invoked.You can customize the progress indicator by using the FluentAutocomplete or FluentAutocomplete parameters: see HeaderFooterContent. |
Title | string? | Gets or sets the text used on aria-label attribute. | |
TitleScrollToNext | string | Next | Gets or sets the title and Aria-Label for the Scroll to next button. |
TitleScrollToPrevious | string | Previous | Gets or sets the title and Aria-Label for the Scroll to previous button. |
Value | string? | Gets or sets the value of the input. This should be used with two-way binding. For the FluentAutocomplete component, use the FluentAutocomplete property instead. | |
ValueExpression | Expression<Func<string>>? | Gets or sets an expression that identifies the bound value. | |
ValueText | string | Gets or sets the text field value. | |
Virtualize | bool | False | If true, the options list will be rendered with virtualization. This is normally used in conjunction with scrolling and causes the option list to fetch and render only the data around the current scroll viewport. This can greatly improve the performance when scrolling through large data sets. If you use FluentAutocomplete, you should supply a value for FluentAutocomplete and mustensure that every row renders with the same constant height. Generally it's preferable not to use FluentAutocomplete if the amount of data being rendered is small. |
Width | string? | 100% | Gets or sets the width of the component. |
EventCallbacks
Name | Type | Description |
|---|---|---|
OnOptionsSearch | EventCallback<OptionsSearchEventArgs<TOption>> | Filter the list of options (items), using the text encoded by the user. |
SelectedOptionChanged | EventCallback<TOption> | Called whenever the selection changed. ⚠️ Only available when Multiple = false. |
SelectedOptionsChanged | EventCallback<IEnumerable<TOption>> | Called whenever the selection changed. ⚠️ Only available when Multiple = true. |
ValueChanged | EventCallback<string> | Gets or sets a callback that updates the bound value. |
ValueTextChanged | EventCallback<string> | Gets or sets the callback that is invoked when the text field value changes. |
Methods
Name | Parameters | Type | Description |
|---|---|---|---|
CloseDropdownAsync | Task | Closes the multiselect dropdown. | |
DisposeAsync | ValueTask | ||
FocusAsync | void | Exposes the elements FocusAsync(bool preventScroll) method. | |
FocusAsync | bool preventScroll | void | Exposes the elements FocusAsync(bool preventScroll) method. |
InvokeOptionsSearchAsync | Task | Performs the search operation and displays the available values. The search takes into account any previously entered text which has updated the FluentAutocomplete. | |
RemoveSelectedItemAsync | TOption item | Task |
FluentPersona Class
Parameters
Name | Type | Default | Description |
|---|---|---|---|
ChildContent | RenderFragment? | Gets or sets the content to display under the FluentPersona.Name. | |
DismissTitle | string? | Gets or sets the title of the dismiss button. | |
Image | string? | Gets or sets the image to display, in replacement of the initials. | |
ImageSize | string? | Gets or sets the size of the image. | |
Initials | string? | Gets or sets the initials to display if no image is provided. By default, the first letters of the FluentPersona.Name is used. | |
Name | string | Gets or sets the name to display. | |
Status | PresenceStatus? | Gets or sets the status to show. See PresenceStatus for options. | |
StatusSize | PresenceBadgeSize | ExtraSmall | Gets or sets the FluentPersona.Status size to use.Default is ExtraSmall. |
StatusTitle | string? | Gets or sets the title to show on hover. If not provided, the status will be used. | |
TextPosition | TextPosition | End | Gets or sets the TextPosition of the text.Default is End. |
EventCallbacks
Name | Type | Description |
|---|---|---|
OnClick | EventCallback<MouseEventArgs> | Gets or sets the event raised when the user clicks on this Persona. |
OnDismissClick | EventCallback | Gets or sets the event raised when the user clicks on the dismiss button. |
Accessibility
This component is compatible with accessibility rules.Except this Invalid ARIA attribute value: aria-controls="[id]-popup" when the list is expanded (will be solved later).
You can customize these 3 messages to be read by screen readers
FluentAutocomplete.AccessibilitySelected = "Selected {0}"List of selected items.FluentAutocomplete.AccessibilityNotFound = "No items found"When the search criteria returns an empty list.FluentAutocomplete.AccessibilityReachedMaxItems = "The maximum number of selected items has been reached."When the maximum number of selected items has been reached.