AutoComplete V2

Example

selected value:

selected label:

---

selected value:

selected label:

Code

Razor (cshtml, Razor)

<AutoCompleteV2 Options="examples" TItem="AutoCompleteExample" LabelString="Label" ValueString="id" @bind-SelectedValue="SelectedValue" PlaceholderString="Ello fessor" IsFormFloating="true" />
<br />
<p>selected value: @SelectedValue?.id</p>
<p>selected label: @SelectedValue?.Label</p>

<hr />

<AutoCompleteV2 Options="examples1" TItem="AutoCompleteExample" LabelString="Label" ValueString="id" @bind-SelectedValue="SelectedValue1" PlaceholderString="Ello fessor" IsFormFloating="false" />
<br />
<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" }, new() { id = 4, Label = "Only one" }, new() { id = 5, Label = "Only one5" }, new() { id = 6, Label = "Only one6" }, new() { id = 7, Label = "Only one7" }, new() { id = 8, Label = "Only one8" }, new() { id = 9, Label = "Only one9" }, new() { id = 10, Label = "Only one10" } };
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; }
}