How to set selected items on load of Blazor AutoComplete

Answer:

We can achieve this using the bind-value variable as like below-highlighted code snippet.

<EditForm Model="@model" OnValidSubmit="handleSubmit">

<DataAnnotationsValidator/>

<SfAutoComplete Placeholder="e.g. Australia" @bind-Value="@model.Name" DataSource="@Country">

<AutoCompleteFieldSettings Value="Name">AutoCompleteFieldSettings>

SfAutoComplete>

<ValidationMessage For="()=>model.Name">ValidationMessage>

<button type="submit">submitbutton>

EditForm>

@code {

private void handleSubmit()

{

}

private Countries model = new Countries();

protected override void OnInitialized()

{

model.Name = "Bermuda";

}

public class Countries

{

[Required]

public string Name { get; set; }

public string Code { get; set; }

}

List Country = new List

{

new Countries() { Name = "Australia", Code = "AU" },

new Countries() { Name = "Bermuda", Code = "BM" },

new Countries() { Name = "Canada", Code = "CA" },

new Countries() { Name = "Cameroon", Code = "CM" },

};

}


Find the sample to set selected items on load of Blazor AutoComplete from here.

Loader.
Up arrow icon