AutoComplete

Example

selected value:

selected label:

---

selected value:

selected label:

Code

Razor (cshtml, Razor)

<AutoComplete LabelText="AutoCompleteExample" Options="examples" TItem="AutoCompleteExample" LabelString="Label" ValueString="id" @bind-SelectedValue="SelectedValue" />

<p>selected value: @SelectedValue?.id</p>
<p>selected label: @SelectedValue?.Label</p>
    
<hr />

<AutoComplete IsFormFloating="false" LabelText="AutoCompleteExample" Options="examples1" TItem="AutoCompleteExample" LabelString="Label" ValueString="id" @bind-SelectedValue="SelectedValue1" />

<p>selected value: @SelectedValue1?.id</p>
<p>selected label: @SelectedValue1?.Label</p>

c#

private AutoCompleteExample SelectedValue { get; set; }
private AutoCompleteExample SelectedValue1 { get; set; }

private List<AutoCompleteExample> examples = new() { new() { id = 1, Label = "One" }, new() { id = 2, Label = "Two" }, new() { id = 3, Label = "Three" } };
private List<AutoCompleteExample> examples1 = new() { new() { id = 1, Label = "Apples" }, new() { id = 2, Label = "Oranges" }, new() { id = 3, Label = "Pears" } };

public class AutoCompleteExample
{
    public int id { get; set; }
    public string Label { get; set; }
}