CODEWITHSUNDEEP
autocompleteblazormudblazor
Orhan
Orhan

Reputation: 191

Supplying MudBlazor Autocomplete with content from a service

I have here an example of an Autocomplete taken from the MudBlazor component library documentation that offers options as I type from a pre-defined list of possible values:

<MudAutocomplete T="string" Label="Select US state" @bind-Value="selectedValue" SearchFunc="@Search" />

@code {
    private string selectedValue;
    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 Task<IEnumerable<string>> Search(string value)
    {
        return Task.FromResult(states.Where(x => x.Contains(value, StringComparison.InvariantCultureIgnoreCase)));
    }

}

This is exactly what I need for my project. But how do I get the values on demand from a web api while the user types? Also, is there a way to influence how the options are presented in the drop-down list?

Upvotes: 2

Views: 4432

Answers (1)

Porkopek
Porkopek

Reputation: 1022

Make your request in the Search method. Replace the return Task.FromResult(states.Where(x => x.Contains(value, StringComparison.InvariantCultureIgnoreCase))); line with the results of the call to your API.

Upvotes: 3

Related Questions