Usage
How you write the search function determines whether or not the Autocomplete shows a full list initially. By setting ResetValueOnEmptyText="true",
the Value will be reset when the user clears the input text. With CoerceText="true" upon selection of an entry from the list,
the Text is always updated. When the user types something that is not on the list and CoerceValue is true,
the Value will be overwritten with the user input which allows it to be passed to the validation function.
Not selected
Not selected
@using System.Threading <MudGrid> <MudItem xs="12" sm="6" md="4"> <MudAutocomplete T="string" Label="US States" @bind-Value="value1" SearchFunc="" ResetValueOnEmptyText="" CoerceText="" CoerceValue="" /> </MudItem> <MudItem xs="12" sm="6" md="4"> <MudAutocomplete T="string" Label="US States" @bind-Value="value2" SearchFunc="" ResetValueOnEmptyText="" CoerceText="" CoerceValue="" AdornmentIcon="@Icons.Material.Filled.Search" AdornmentColor="Color.Primary" /> </MudItem> <MudItem xs="12" md="12"> <MudText Class="mb-n3" Typo="Typo.body2"> <MudChip T="string">@(value1 ?? "Not selected")</MudChip><MudChip T="string">@(value2 ?? "Not selected")</MudChip> </MudText> </MudItem> <MudItem xs="12" md="12" class="flex-column"> <MudSwitch @bind-Value="resetValueOnEmptyText" Color="Color.Primary">Reset Value on empty Text</MudSwitch> <MudSwitch @bind-Value="coerceText" Color="Color.Secondary">Coerce Text to Value</MudSwitch> <MudSwitch @bind-Value="coerceValue" Color="Color.Tertiary">Coerce Value to Text (if not found)</MudSwitch> </MudItem> </MudGrid>
@code { private bool resetValueOnEmptyText; private bool coerceText; private bool coerceValue; private string value1, value2; private string[] states = { "Alabama", "Alaska", "American Samoa", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "District of Columbia", "Federated States of Micronesia", "Florida", "Georgia", "Guam", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Marshall Islands", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Northern Mariana Islands", "Ohio", "Oklahoma", "Oregon", "Palau", "Pennsylvania", "Puerto Rico", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virgin Island", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming", }; private async Task<IEnumerable<string>> Search1(string value, CancellationToken token) { // In real life use an asynchronous function for fetching data from an api. await Task.Delay(5, token); // if text is null or empty, show complete list if (string.IsNullOrEmpty(value)) return states; return states.Where(x => x.Contains(value, StringComparison.InvariantCultureIgnoreCase)); } private async Task<IEnumerable<string>> Search2(string value, CancellationToken token) { // In real life use an asynchronous function for fetching data from an api. await Task.Delay(5, token); // if text is null or empty, don't return values (drop-down will not open) if (string.IsNullOrEmpty(value)) return new string[0]; return states.Where(x => x.Contains(value, StringComparison.InvariantCultureIgnoreCase)); } }
Margin And Dense
While the margin property affects the input element, the dense property affects the dropdown element.
@using System.Threading <MudGrid> <MudItem xs="12" sm="6"> <div> <MudCheckBox T="bool" ValueChanged="ChangeMargin" Color="Color.Primary" Label="@(" Margin: " + _margin)" /> </div> <div> <MudCheckBox @bind-Value="_dense" Color="Color.Primary" Label="@(" Dense: " + _dense)" /> </div> </MudItem> <MudItem xs="12" sm="6" md="4"> <MudAutocomplete T="string" Label="US States" @bind-Value="value1" SearchFunc="" Margin="@_margin" Dense="@_dense" Variant="Variant.Outlined" /> </MudItem> </MudGrid>
@code { Margin _margin = Margin.None; bool _dense = false; private void ChangeMargin() { if (_margin == Margin.None) { _margin = Margin.Dense; } else { _margin = Margin.None; } } private string value1; private string[] states = { "Alabama", "Alaska", "American Samoa", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "District of Columbia", "Federated States of Micronesia", "Florida", "Georgia", "Guam", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Marshall Islands", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Northern Mariana Islands", "Ohio", "Oklahoma", "Oregon", "Palau", "Pennsylvania", "Puerto Rico", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virgin Island", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming", }; private async Task<IEnumerable<string>> Search1(string value, CancellationToken token) { // In real life use an asynchronous function for fetching data from an api. await Task.Delay(5, token); // if text is null or empty, show complete list if (string.IsNullOrEmpty(value)) return states; return states.Where(x => x.Contains(value, StringComparison.InvariantCultureIgnoreCase)); } }