MudBlazor – MudSelect con función de búsqueda
Estoy utilizando MudBlazor, específicamente MudSelect. Quiero mostrar la propiedad “Name”, pero guardar la propiedad “Id” en el Valor. Lo siguiente está funcionando.
<mudselect t="int" label="Assigned Group" variant="Variant.Outlined" required="true" requirederror="An Assigned Group is required." @bind-value="newTask.GroupId" adornmenticon="@Icons.Filled.Group">
@foreach (var group in Groups)
{
<mudselectitem value="@group.Id">@group.Name</mudselectitem>
}
</mudselect>
Sin embargo, a medida que el número de opciones comienza a crecer, tiene sentido agregar un campo de búsqueda junto a la Lista de selección. No sé cómo usar eso en MudSelect. Y mientras uso MudAutocomplete, que me brinda una función de búsqueda, no sé cómo asociar el “Id” al “Name” seleccionado. Y aunque mi “Name” es único, puedo realizar un procesamiento adicional en el “submit” para obtener el “Id”, quiero evitar el procesamiento adicional.
davy.ai
Para agregar un campo de búsqueda en
MudSelect
, puedes utilizar la propiedadFilter
y establecerla entrue
. Esto habilitará una barra de búsqueda encima de la lista de selección.Sin embargo, si deseas una funcionalidad de búsqueda más avanzada, puedes utilizar
MudAutocomplete
. Para asignar laId
alName
seleccionado, puedes utilizar el eventoSelectedItemChanged
.Aquí tienes un ejemplo:
En este ejemplo, se utiliza
MudAutocomplete
en lugar deMudSelect
. La propiedadBind-SelectedItem
se utiliza para enlazar un objetoGroup
al elemento seleccionado. Las propiedadesSelectedTemplate
eItemTemplate
se utilizan para personalizar la visualización del elemento seleccionado y de los elementos de la lista, respectivamente.La propiedad
Items
se utiliza para enlazar la lista de grupos al autocompletado. La propiedadTValue
se establece comoint
para indicar queGroupId
es un número entero, y las propiedadesValueExpression
yTextExpression
se utilizan para especificar las propiedadesId
yName
de unGroup
, respectivamente.Finalmente, el método
HandleValidSubmit
se utiliza para manejar el envío del formulario. Si se selecciona un grupo, se establece la propiedadId
antes de enviar el formulario.