Selected search value:
Selected text value:
The Autocomplete
component provides suggestions while you type into the field. The component is in essence
a text box which, at runtime, filters data in a drop-down by a Filter
operator when a user captures a value.
You may also enable FreeTyping
and AutoComplete
can be used to just provide suggestions based on user input.
Blazorise.Components
NuGet package.
Install-Package Blazorise.Components
_Imports.razor
add:
@using Blazorise.Components
<Autocomplete TItem="Country" TValue="string" Data="" TextField="@(( item ) => item.Name)" ValueField="@(( item ) => item.Iso)" @bind-SelectedValue="" @bind-SelectedText="selectedAutoCompleteText" Placeholder="Search..." Filter="AutocompleteFilter.StartsWith" FreeTyping CustomFilter="@(( item, searchValue ) => item.Name.IndexOf( searchValue, 0, StringComparison.CurrentCultureIgnoreCase ) >= 0 )"> <NotFoundContent> Sorry... @context was not found! :( </NotFoundContent> </Autocomplete> <Field Horizontal> <FieldBody ColumnSize="ColumnSize.Is12"> Selected search value: @selectedSearchValue </FieldBody> <FieldBody ColumnSize="ColumnSize.Is12"> Selected text value: @selectedAutoCompleteText </FieldBody> </Field>
@code { [Inject] public CountryData CountryData { get; set; } public IEnumerable<Country> Countries; protected override async Task OnInitializedAsync() { Countries = await CountryData.GetDataAsync(); await base.OnInitializedAsync(); } public string selectedSearchValue { get; set; } public string selectedAutoCompleteText { get; set; } }
<Autocomplete TItem="Country" TValue="string" Data="" TextField="@(( item ) => item.Name)" ValueField="@(( item ) => item.Iso)" Placeholder="Search..." Multiple FreeTyping @bind-SelectedValues="multipleSelectionData" @bind-SelectedTexts="multipleSelectionTexts"> </Autocomplete> <Field Horizontal> <FieldBody ColumnSize="ColumnSize.Is12"> Selected Values: @string.Join(',', multipleSelectionData) </FieldBody> <FieldBody ColumnSize="ColumnSize.Is12"> Selected Texts: @string.Join(',', multipleSelectionTexts) </FieldBody> </Field>
@code { [Inject] public CountryData CountryData { get; set; } public IEnumerable<Country> Countries; protected override async Task OnInitializedAsync() { Countries = await CountryData.GetDataAsync(); multipleSelectionData = new List<string>() { Countries.ElementAt( 1 ).Iso, Countries.ElementAt( 3 ).Iso }; await base.OnInitializedAsync(); } List<string> multipleSelectionData; List<string> multipleSelectionTexts = new(); }
ItemContent
.
<Autocomplete TItem="Country" TValue="string" Data="" TextField="@(( item ) => item.Name)" ValueField="@(( item ) => item.Iso)" @bind-SelectedValue="" @bind-SelectedText="selectedAutoCompleteText" Placeholder="Search..." Filter="AutocompleteFilter.StartsWith" FreeTyping CustomFilter="@(( item, searchValue ) => item.Name.IndexOf( searchValue, 0, StringComparison.CurrentCultureIgnoreCase ) >= 0 )"> <NotFoundContent> Sorry... @context was not found! :( </NotFoundContent> <ItemContent> <Div Flex="Flex.InlineFlex.JustifyContent.Between" Width="Width.Is100"> <Heading Margin="Margin.Is2.FromBottom">@context.Value</Heading> <Small>@context.Item.Capital</Small> </Div> <Paragraph Margin="Margin.Is2.FromBottom">@context.Text</Paragraph> </ItemContent> </Autocomplete> <Field Horizontal> <FieldBody ColumnSize="ColumnSize.Is12"> Selected search value: @selectedSearchValue </FieldBody> <FieldBody ColumnSize="ColumnSize.Is12"> Selected text value: @selectedAutoCompleteText </FieldBody> </Field>
@code { [Inject] public CountryData CountryData { get; set; } public IEnumerable<Country> Countries; protected override async Task OnInitializedAsync() { Countries = await CountryData.GetDataAsync(); await base.OnInitializedAsync(); } string selectedSearchValue { get; set; } string selectedAutoCompleteText { get; set; } }
Name | Description | Type | Default |
---|---|---|---|
TItem |
Model data type. | generic |
|
Data |
Data used for the search. | IEnumerable<TItem> |
|
TextField |
Selector for the display name field. | Func |
|
ValueField |
Selector for the value field. | Func |
|
SelectedValue |
Currently selected value. | object |
|
SelectedValueChanged |
Raises an event after the selected value has changed. | EventCallback<string> |
|
SelectedText |
Currently selected text. | string |
|
SelectedTextChanged |
Raises an event after the selected text has changed. | EventCallback<string> |
|
SearchChanged |
Occurs on every search text change. | EventCallback<string> |
|
Placeholder |
Placeholder for the empty search field. | string |
|
MinLength |
Minimum number of character needed to start search. | int |
1 |
MaxMenuHeight |
Sets the maximum height of the dropdown menu. | string |
200px |
Filter |
Filter method used to search the data. | enum |
StartsWith |
Disabled |
Disable the input field. | bool |
false |
Immediate |
If true the text in will be changed after each key press (overrides global settings). | bool? |
null |
Debounce |
If true the entered text will be slightly delayed before submitting it to the internal value. | bool? |
null |
DebounceInterval |
Interval in milliseconds that entered text will be delayed from submitting to the internal value. | int? |
null |
Validator |
Validation handler used to validate selected value. | Action<ValidatorEventArgs> |
null |
AsyncValidator |
Asynchronously validates the selected value. | Func<ValidatorEventArgs, CancellationToken, Task> |
null |
NotFoundContent |
Render fragment when no value has been found on the data source. | RenderFragment<string> |
|
NotFound |
Raises an event when no value has been found on the data source. | EventCallback<string> |
|
FreeTyping |
Allows the value to not be on the data source. | bool |
false |
CustomFilter |
Handler for custom filtering on Autocomplete’s data source. | Func<TItem, string, bool> |
|
Multiple |
Allows for multiple selection. | bool |
false |
MultipleBadgeColor |
Sets the Badge color for the multiple selection values. | Color |
Color.Primary |
SelectedValues |
Currently selected items values. | List<TValue> |
|
SelectedValuesChanged |
Occurs after the selected values have changed. | EventCallback<List<TValue>> |
|
SelectedTexts |
Currently selected items texts. | List<string> |
|
SelectedTextsChanged |
Occurs after the selected texts have changed. | EventCallback<List<string>> |
|
ItemContent |
Specifies the item content to be rendered inside each dropdown item. | RenderFragment<ItemContext<TItem,TValue>> |
|
CloseOnSelection |
Specifies whether Autocomplete's dropdown closes on selection. This is only evaluated when the Autocomplete's Multiple is set to true. Defauls to true. | bool |
true |