Table of Contents

Class MudAutocomplete<T>

Namespace
MudBlazor
Assembly
MudBlazor.dll

Represents a component with simple and flexible type-ahead functionality.

public class MudAutocomplete<T> : MudBaseInput<T>, IComponent, IHandleEvent, IHandleAfterRender, IMudStateHasChanged, IFormComponent, IAsyncDisposable

Type Parameters

T

The type of item to search.

Inheritance
MudAutocomplete<T>
Implements
Inherited Members
Extension Methods

Constructors

MudAutocomplete() 

public MudAutocomplete()

Properties

AfterItemsTemplate

The custom template shown below the list of items, if SearchFunc returns items to display. Otherwise, the fragment is hidden.

[Parameter]
[Category("List behavior")]
public RenderFragment? AfterItemsTemplate { get; set; }

Property Value

RenderFragment

Remarks

Defaults to null. Use the BeforeItemsTemplate property to control content displayed above items.

AnchorOrigin

The location where the popover will open from.

[Parameter]
[Category("List appearance")]
public Origin AnchorOrigin { get; set; }

Property Value

Origin

Remarks

Defaults to BottomLeft.

AutocompleteClassname 

protected string AutocompleteClassname { get; }

Property Value

string

BeforeItemsTemplate

The custom template shown above the list of items, if SearchFunc returns items to display. Otherwise, the fragment is hidden.

[Parameter]
[Category("List behavior")]
public RenderFragment? BeforeItemsTemplate { get; set; }

Property Value

RenderFragment

Remarks

Defaults to null. Use the AfterItemsTemplate property to control content displayed below items.

CircularProgressClassname 

protected string CircularProgressClassname { get; }

Property Value

string

Classname 

protected string Classname { get; }

Property Value

string

ClearIcon

Custom clear icon when Clearable is enabled.

[Parameter]
[Category("Appearance")]
public string ClearIcon { get; set; }

Property Value

string

Clearable

Displays the Clear icon button.

[Parameter]
[Category("Behavior")]
public bool Clearable { get; set; }

Property Value

bool

Remarks

Defaults to false. When true, an icon is displayed which, when clicked, clears the Text and Value. Use the ClearIcon property to control the Clear button icon.

CloseIcon

The "close" Autocomplete icon.

[Parameter]
[Category("Appearance")]
public string CloseIcon { get; set; }

Property Value

string

Remarks

Defaults to ArrowDropDown.

CoerceText

Overrides the Text property when an item is selected.

[Parameter]
[Category("Behavior")]
public bool CoerceText { get; set; }

Property Value

bool

Remarks

Defaults to true. When true, selecting a value will update the Text property. When false, incomplete values for Text are allowed.

CoerceValue

Sets the Value property even if no match is found by SearchFunc.

[Parameter]
[Category("Behavior")]
public bool CoerceValue { get; set; }

Property Value

bool

Remarks

Defaults to false. When true, the user input will be applied to the Value property which allows it to be validated and show an error message.

DebounceInterval

The debounce interval, in milliseconds.

[Parameter]
[Category("Behavior")]
public int DebounceInterval { get; set; }

Property Value

int

Remarks

Defaults to 100. A higher value can help reduce the number of calls to SearchFunc, which can improve responsiveness.

Dense

Uses compact padding.

[Parameter]
[Category("List appearance")]
public bool Dense { get; set; }

Property Value

bool

Remarks

Defaults to false.

DropdownSettings

The behavior of the dropdown popover menu

[Category("Behavior")]
[Parameter]
public DropdownSettings DropdownSettings { get; set; }

Property Value

DropdownSettings

Remarks

Defaults to Fixed false Defaults to OverflowBehaviorFlipOnOpen

InputClass

Input's classnames, separated by space.

[Category("Appearance")]
[Parameter]
public string? InputClass { get; set; }

Property Value

string

InputClassname 

protected string InputClassname { get; }

Property Value

string

ItemDisabledFunc

The function used to determine if an item should be disabled.

[Parameter]
[Category("List behavior")]
public Func<T, bool>? ItemDisabledFunc { get; set; }

Property Value

Func<T, bool>

Remarks

Defaults to null.

ItemDisabledTemplate

The custom template used to display disabled items.

[Parameter]
[Category("List behavior")]
public RenderFragment<T>? ItemDisabledTemplate { get; set; }

Property Value

RenderFragment<T>

Remarks

Defaults to null.

ItemSelectedTemplate

The custom template used to display selected items.

[Parameter]
[Category("List behavior")]
public RenderFragment<T>? ItemSelectedTemplate { get; set; }

Property Value

RenderFragment<T>

Remarks

Defaults to null. Use the ItemTemplate property to control the display of unselected items.

ItemTemplate

The custom template used to display unselected items.

[Parameter]
[Category("List behavior")]
public RenderFragment<T>? ItemTemplate { get; set; }

Property Value

RenderFragment<T>

Remarks

Defaults to null. Use the ItemSelectedTemplate property to control the display of selected items.

ListClass

The CSS classes applied to the internal list.

[Parameter]
[Category("List appearance")]
public string? ListClass { get; set; }

Property Value

string

Remarks

Defaults to null. You can use spaces to separate multiple classes.

ListItemClass

The CSS classes applied to internal list items.

[Parameter]
[Category("List appearance")]
public string? ListItemClass { get; set; }

Property Value

string

Remarks

Defaults to null. You can use spaces to separate multiple classes.

MaxHeight

The maximum height, in pixels, of the Autocomplete when it is open.

[Parameter]
[Category("List appearance")]
public int MaxHeight { get; set; }

Property Value

int

Remarks

Defaults to 300.

MaxItems

The maximum number of items to display.

[Parameter]
[Category("List behavior")]
public int? MaxItems { get; set; }

Property Value

int?

Remarks

Defaults to 10. A value of null will display all items.

MinCharacters

The minimum number of characters typed to initiate a search.

[Parameter]
[Category("Behavior")]
public int MinCharacters { get; set; }

Property Value

int

Remarks

Defaults to 0.

MoreItemsTemplate

The custom template used when the number of items returned by SearchFunc is more than the value of the MaxItems property.

[Parameter]
[Category("List behavior")]
public RenderFragment? MoreItemsTemplate { get; set; }

Property Value

RenderFragment

Remarks

Defaults to null.

NoItemsTemplate

The custom template used when no items are returned by SearchFunc.

[Parameter]
[Category("List behavior")]
public RenderFragment? NoItemsTemplate { get; set; }

Property Value

RenderFragment

Remarks

Defaults to null.

OnClearButtonClick

Occurs when the Clear button has been clicked.

[Parameter]
public EventCallback<MouseEventArgs> OnClearButtonClick { get; set; }

Property Value

EventCallback<MouseEventArgs>

Remarks

The Text and Value properties will be blank when this callback occurs.

Open

Displays the search result drop-down.

public bool Open { get; protected set; }

Property Value

bool

Remarks

When this property changes, the OpenChanged event will occur.

OpenChanged

Occurs when the Open property has changed.

[Parameter]
public EventCallback<bool> OpenChanged { get; set; }

Property Value

EventCallback<bool>

OpenIcon

The "open" Autocomplete icon.

[Parameter]
[Category("Appearance")]
public string OpenIcon { get; set; }

Property Value

string

Remarks

Defaults to ArrowDropDown.

OpenOnFocus

Additionally, opens the list when focus is received on the input element; otherwise only opens on click.

[Parameter]
[Category("List behavior")]
public bool OpenOnFocus { get; set; }

Property Value

bool

Remarks

Defaults to true.

PopoverClass

The CSS classes applied to the popover.

[Parameter]
[Category("List appearance")]
public string? PopoverClass { get; set; }

Property Value

string

Remarks

Defaults to null. You can use spaces to separate multiple classes.

ProgressIndicatorColor

The color of the progress indicator.

[Parameter]
[Category("Appearance")]
public Color ProgressIndicatorColor { get; set; }

Property Value

Color

Remarks

Defaults to Default. This property is used when ShowProgressIndicator is true.

ProgressIndicatorInPopoverTemplate

The custom template used for the progress indicator inside the popover when ShowProgressIndicator is true.

[Parameter]
[Category("List behavior")]
public RenderFragment? ProgressIndicatorInPopoverTemplate { get; set; }

Property Value

RenderFragment

Remarks

Defaults to null. Use the ProgressIndicatorTemplate property to control content displayed for the progress indicator.

ProgressIndicatorTemplate

The custom template used for the progress indicator when ShowProgressIndicator is true.

[Parameter]
[Category("List behavior")]
public RenderFragment? ProgressIndicatorTemplate { get; set; }

Property Value

RenderFragment

Remarks

Defaults to null. Use the ProgressIndicatorInPopoverTemplate property to control content displayed for the progress indicator inside the popover.

RelativeWidth

Determines the width of this Popover dropdown in relation to the parent container.

[Parameter]
[Category("Appearance")]
public DropdownWidth RelativeWidth { get; set; }

Property Value

DropdownWidth

Remarks

Defaults to Relative.

When Relative, restricts the max-width of the component to the width of the parent container

When Adaptive, restricts the min-width of the component to the width of the parent container

ResetValueOnEmptyText

Reset the selected value if the user deletes the text.

[Parameter]
[Category("Behavior")]
public bool ResetValueOnEmptyText { get; set; }

Property Value

bool

Remarks

Defaults to false.

ReturnedItemsCountChanged

Occurs when the number of items returned by SearchFunc has changed.

[Parameter]
public EventCallback<int> ReturnedItemsCountChanged { get; set; }

Property Value

EventCallback<int>

Remarks

The number of items returned determines when custom templates are shown. If the number is 0, NoItemsTemplate will be shown. If the number is beyond MaxItems, MoreItemsTemplate will be shown.

SearchFunc

The function used to search for items.

[Parameter]
[Category("List behavior")]
public Func<string?, CancellationToken, Task<IEnumerable<T>>?>? SearchFunc { get; set; }

Property Value

Func<string, CancellationToken, Task<IEnumerable<T>>>

Remarks

This function searches for items containing the specified string value, and returns items which match up to the MaxItems property. You can use the provided CancellationToken which is marked as canceled when the user changes the search text or selects a value from the list.

SelectOnActivation

Highlights the text when the component receives focus.

[Parameter]
[Category("Behavior")]
public bool SelectOnActivation { get; set; }

Property Value

bool

Remarks

Defaults to true. Previously known as SelectOnClick.

SelectValueOnTab

Updates the Value to the currently selected item when pressing the Tab key.

[Parameter]
[Category("List behavior")]
public bool SelectValueOnTab { get; set; }

Property Value

bool

Remarks

Defaults to false.

ShowProgressIndicator

Shows the progress indicator during searches.

[Parameter]
[Category("Behavior")]
public bool ShowProgressIndicator { get; set; }

Property Value

bool

Remarks

Defaults to false. The progress indicator uses the color specified in the ProgressIndicatorColor property.

Strict

Selects items without resetting the Value.

[Parameter]
[Category("Behavior")]
public bool Strict { get; set; }

Property Value

bool

Remarks

Defaults to true. When true, selecting an option will trigger a SearchFunc with the current Text. Otherwise, an empty string is passed which can make it easier to view and select other options without resetting the Value. When false, T must either be a record or override the GetHashCode and Equals methods.

ToStringFunc

The function used to get the display text for each item.

[Parameter]
[Category("List behavior")]
public Func<T?, string?>? ToStringFunc { get; set; }

Property Value

Func<T, string>

Remarks

Defaults to the ToString() method of items.

TransformOrigin

The transform origin point for the popover.

[Parameter]
[Category("List appearance")]
public Origin TransformOrigin { get; set; }

Property Value

Origin

Remarks

Defaults to TopLeft.

Methods

BlurAsync()

Releases focus from this Autocomplete.

public override ValueTask BlurAsync()

Returns

ValueTask

BuildRenderTree(RenderTreeBuilder) 

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

__builder RenderTreeBuilder

ClearAsync()

Resets the Text and Value, and closes the drop-down if it is open.

public Task ClearAsync()

Returns

Task

CloseMenuAsync()

Closes the drop-down of items.

public Task CloseMenuAsync()

Returns

Task

DisposeAsyncCore()

Called to dispose this instance.

protected override ValueTask DisposeAsyncCore()

Returns

ValueTask

FocusAsync()

Sets focus to this Autocomplete.

public override ValueTask FocusAsync()

Returns

ValueTask

GetAutocomplete()

Returns a value for the autocomplete attribute, either supplied by default or the one specified in the attribute overrides.

protected object? GetAutocomplete()

Returns

object

GetListItemClassname(bool) 

protected string GetListItemClassname(bool isSelected)

Parameters

isSelected bool

Returns

string

OnAfterRender(bool) 

protected override void OnAfterRender(bool firstRender)

Parameters

firstRender bool

OnInitialized() 

protected override void OnInitialized()

OpenMenuAsync()

Opens the drop-down of items.

public Task OpenMenuAsync()

Returns

Task

Remarks

Will have no effect if the autocomplete is disabled or read-only.

ResetValueAsync() 

protected override Task ResetValueAsync()

Returns

Task

SelectAsync()

Selects all the current text within the Autocomplete text box.

public override ValueTask SelectAsync()

Returns

ValueTask

SelectOptionAsync(T)

Changes the currently selected item to the specified value.

public Task SelectOptionAsync(T value)

Parameters

value T

The value to set.

Returns

Task

SelectRangeAsync(int, int)

Selects a portion of the text within the Autocomplete text box.

public override ValueTask SelectRangeAsync(int pos1, int pos2)

Parameters

pos1 int

The index of the first character to select.

pos2 int

The index of the last character to select.

Returns

ValueTask

A ValueTask object.

ToggleMenuAsync()

Opens or closes the drop-down of items depending on whether it was closed or open.

public Task ToggleMenuAsync()

Returns

Task

Remarks

Will have no effect if the autocomplete is disabled or read-only.

UpdateTextPropertyAsync(bool)

Occurs when the value has changed internally.

protected override Task UpdateTextPropertyAsync(bool updateValue)

Parameters

updateValue bool

Returns

Task

Remarks

This method is called when the Text property needs to be refreshed from current Value.

UpdateValuePropertyAsync(bool)

Occurs when the value has changed internally.

protected override Task UpdateValuePropertyAsync(bool updateText)

Parameters

updateText bool

Returns

Task

Remarks

This method is called when the Value property needs to be refreshed from current Text.