ComboBox

1. Demo AstrolComboBox

Name

@using Astrol.Component.Basic.Form

<AstrolComboBox HasContentInput = "true"

 ShowOpenIcon="true"

 TItem="Person"

 Placeholder="Search for a person"

 Id="@nameof(Person.Name)"

 PropertyShow="@nameof(Person.Name)"

 OnChange="OnChange"

 NoSearchResultText="No results found"

 DataList="list" />

<div><b>Id: </b>@person?.Id</div>

<div><b>Name: </b>@person?.Name</div>

<div><b>Age: </b>@person?.Age</div>

<div><b>Sex: </b>@person?.Sex</div>

@code {

 private Person? person;

 private async Task OnChange(ChangeEventArgs e) {

 person = (Person?)e.Value;

 List<Person> list = new List<Person> {

 new Person { Id = 1, Name = "Juan", Age = 25, Sex = true },

 new Person { Id = 2, Name = "Ana", Age = 30, Sex = false },

 new Person { Id = 3, Name = "Pedro", Age = 42, Sex = true },

 new Person { Id = 4, Name = "María", Age = 19, Sex = false },

 new Person { Id = 5, Name = "Carlos", Age = 55, Sex = true }

};

 public class Person {

 public int Id { get; set; }

 public string Name { get; set; }

 public int Age { get; set; }

 public bool Sex { get; set; }

Supported parameters

Id (string), HTML id property you want to set.
Class (string), custom CSS class you want to set.
HasContentInput (bool), allows you to set whether you want to use the AstrolContentInput container, default is false.
ShowOpenIcon (bool), allows you to set whether the icon is shown to the right of the component, only applies if HasContentInput is true, by default it is false< /b>.

Placeholder (string), placeholder text to display if desired.

Filtrable (bool), allows you to set whether you want it to be filterable while typing, default is true.

TItem (object), object you want to represent (required).

InitialValue (TItem), initial value (can be null).

PropertyShow (TItem), property of the object you want to display when the list is expanded (required).

PropertyShowIsHtml(bool), allows you to set whether the value of the PropertyShow property is HTML so that it is rendered as such, by default it is (false).

DataList (List<TItem>), list of objects to represent.

OnChange (EventCallback<ChangeEventArgs>), response event triggered when the desired object is selected (required).

NoSearchResultText (string), text to display when no results are found (default is Sin resultados).