Autocomplete - MudBlazor

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. Otherwise, the value is kept and the text coerced to the current value.

US States

Not selected

Reset Value on empty Text

Coerce Text to Value

<MudGrid>
    <MudItem xs="12" sm="6" md="4">
        <MudAutocomplete T="string" Label="US States" @bind-Value="value1" SearchFunc="@Search1" ResetValueOnEmptyText="@resetValueOnEmptyText" CoerceText="@coerceText" />
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudAutocomplete T="string" Label="US States" @bind-Value="value2" SearchFunc="@Search2" ResetValueOnEmptyText="@resetValueOnEmptyText" CoerceText="@coerceText" />
    </MudItem>
    <MudItem xs="12" md="12">
        <MudText Class="mb-n3" Typo="Typo.body2">
            <MudChip>@(value1 ?? "Not selected")</MudChip><MudChip>@(value2 ?? "Not selected")</MudChip>
        </MudText>
    </MudItem>
    <MudItem xs="12" md="12">
        <MudSwitch @bind-Checked="resetValueOnEmptyText" Color="Color.Primary">Reset Value on empty Text</MudSwitch>
        <MudSwitch @bind-Checked="coerceText" Color="Color.Secondary">Coerce Text to Value</MudSwitch>
    </MudItem>
</MudGrid>

@code {
    private bool resetValueOnEmptyText;
    private bool coerceText;
    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)
    {
        // In real life use an asynchronous function for fetching data from an api.
        await Task.Delay(5);

        // 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)
    {
        // In real life use an asynchronous function for fetching data from an api.
        await Task.Delay(5);

        // 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));
    }
}

Presentation

When you use objects, Autocomplete uses ToString() to convert the object into text form. You can set a custom ToStringFunc to override how the list items are stringified. This string representation is also what you'll get as input to the search function.
If that is not enough, you can define an <ItemTemplate> and even an <ItemSelectedTemplate> to create highly sophisticated list item presentations.

Periodic Table Element

Selected values:

Not selected

@using System.Net.Http.Json
@using MudBlazor.Examples.Data.Models
@inject HttpClient httpClient

<MudGrid>
    <MudItem xs="12" sm="6" md="4">
        <MudAutocomplete T="Element" Label="Periodic Table Element" @bind-Value="value1" SearchFunc="@Search" ToStringFunc="@(e=> e==null?null : $"{e.Name} ({e.Sign})")" />
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudAutocomplete T="Element" Label="Periodic Table Element" @bind-Value="value2" SearchFunc="@Search" ToStringFunc="@(e=> e==null?null : $"{e.Name} ({e.Sign})")">
            <ItemTemplate Context="e">                          
                <MudText><MudIcon Icon="@Icons.Material.Filled.CheckBoxOutlineBlank" Class="mb-n1 mr-3" />@($"{e.Name} ({e.Sign})")</MudText>
            </ItemTemplate>
            <ItemSelectedTemplate Context="e">                
                <MudText><MudIcon Icon="@Icons.Material.Filled.CheckBox" Class="mb-n1 mr-3" />@($"{e.Name} ({e.Sign})")</MudText>
            </ItemSelectedTemplate>
        </MudAutocomplete>
    </MudItem>
    <MudItem xs="12" md="12">
        <MudText Class="mb-n3" Typo="Typo.body2">
            Selected values: <MudChip>@(value1?.ToString() ?? "Not selected")</MudChip><MudChip>@(value2?.ToString() ?? "Not selected")</MudChip>
        </MudText>
    </MudItem>
</MudGrid>

@code {
    private Element value1, value2;

    private async Task<IEnumerable<Element>> Search(string value)
    {
        return  await httpClient.GetFromJsonAsync<List<Element>>($"webapi/periodictable/{value}");
    }
}