AutoComplete example -- neeeded to add bind-Value

[Bret]

I recently switched to SyncFusion from a different blazor component for my autocomplete search boxes; I need to add a bind-Value field as it was not covered in the example. Because I am binding to a class rather than a string I found I needed to add the class both for the TValue and TItem fields. The code works but now I am wondering if this is the most efficient way to use the autocomplete component.

<SfAutoComplete TValue="Classroom" TItem="Classroom" Placeholder="e.g. Room-300" DataSource="classrooms" @bind-Value="SelectedRoom">

<AutoCompleteFieldSettings Value="RoomName"></AutoCompleteFieldSettings>

</SfAutoComplete>

[Priyanka Karthikeyan]

Hi Bret,

 

Thank you for reaching out to us!

 

If you bind the TValue property as a class name in the SfAutoComplete component, you need to ensure that the value is bound as an object. Below is a code snippet demonstrating how to achieve this, along with a working sample and relevant documentation reference for your convenience.

 

<SfAutoComplete TValue="Games" TItem="Games" Width="300px" Placeholder="Select a game" DataSource="@LocalData" @bind-Value="@SelectedValue">
    <AutoCompleteFieldSettings Value="Name"/>
</SfAutoComplete>

 

@code {

 

    public Games SelectedValue { get; set; } = new Games() { ID = "Game7", Name = "Hockey" };
    public class Games
    {
        public string ID { get; set; }
        public string Name { get; set; }
    }
    List<Games> LocalData = new List<Games> {
    new Games() { ID= "Game1", Name= "American Football" },
    new Games() { ID= "Game2", Name= "Badminton" },
    new Games() { ID= "Game3", Name= "Basketball" },
    new Games() { ID= "Game4", Name= "Cricket" },
    new Games() { ID= "Game5", Name= "Football" },
    new Games() { ID= "Game6", Name= "Golf" },
    new Games() { ID= "Game7", Name= "Hockey" },
    new Games() { ID= "Game8", Name= "Rugby"},
    new Games() { ID= "Game9", Name= "Snooker" },
    new Games() { ID= "Game10", Name= "Tennis"},
  };
}

 

Sample: https://blazorplayground.syncfusion.com/rXLItiCQqzWfOjbS

 

UG documentation reference: https://blazor.syncfusion.com/documentation/autocomplete/value-binding#object-binding

 

Regards,

Priyanka K

[Bret]

Thanks I have applied to binv-Value

[Kalpana Ganesan]

You are welcome. Please get back to us for further assistance.