How to get the selected object in Blazor Autocomplete

[Syncfusion Support]

Query: How to get the selected object in Blazor Autocomplete?

Answer:

We can get the selected value of the Autocomplete by using either of the two ways.

1. Using ValueChange event 

ValueChange event triggers every value changed in AutoComplete. We can get the changed value as args.Value in the event arguments of ValueChange event.

<SfAutoComplete TValue="string" Width="@Width" TItem="Countries" Placeholder="e.g. Australia" DataSource="@Country"> 

    <AutoCompleteFieldSettings Value="Name"></AutoCompleteFieldSettings> 

    <AutoCompleteEvents TValue="string" ValueChange="OnValueChanged"></AutoCompleteEvents> 

</SfAutoComplete> 

 

 

public void OnValueChanged(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string> args) 

    { 

        this.ChangedValue = args.Value; 

    } 

2. Using OnValueSelect event

 

OnValueSelect event triggers on every value are getting selected from the popup. We can also get the selected value as args.ItemData from the event arguments. 

<SfAutoComplete TValue="string" Width="@Width" TItem="Countries" Placeholder="e.g. Australia" DataSource="@Country"> 

    <AutoCompleteFieldSettings Value="Name"></AutoCompleteFieldSettings> 

    <AutoCompleteEvents TValue="string" ValueChange="OnValueChanged" OnValueSelect="OnValueSelected"></AutoCompleteEvents> 

</SfAutoComplete> 

public void OnValueSelected(SelectEventArgs args) 

    { 

        var itemData = JsonConvert.DeserializeObject<Countries>(args.ItemData != null ? args.ItemData.ToString() : ""); 

        this.SelectedValue = itemData.Name; 

    } 

Find the sample to get the selected object in Blazor Autocomplete from here.

[Mason Channer]

I get  cannot convert onChange from 'method group' to EventCallBack

<SfAutoComplete ID="StockFinderId" TValue="string" TItem="StockFinder" @bind-Value="selectedStockFinder" Placeholder="E.g. CT2002-0" Query="@Query" Autofill="true">

                    <Syncfusion.Blazor.Data.SfDataManager Url="api/Stockfinders/dropdown" Adaptor="Syncfusion.Blazor.Adaptors.WebApiAdaptor" CrossDomain="true"></Syncfusion.Blazor.Data.SfDataManager>

                    <AutoCompleteFieldSettings Value="Model"></AutoCompleteFieldSettings>

                    <AutoCompleteEvents TValue="string" TItem="StockFinder"  ValueChange="onChange"></AutoCompleteEvents>

</SfAutoComplete>

[Sevvandhi Nagulan]

Hi Mason, 

Greetings from Syncfusion support. 

We checked your query. Please add the TItem in the change event argument to resolve the reported issue. Please refer the below code, 

@using Syncfusion.Blazor.DropDowns; 

 

<SfAutoComplete TValue="string" TItem="StockFinder" Placeholder="e.g. Basketball" DataSource="@Games"> 

    <AutoCompleteFieldSettings Value="Text"></AutoCompleteFieldSettings> 

    <AutoCompleteEvents TValue="string" TItem="StockFinder" ValueChange="onChange"></AutoCompleteEvents> 

</SfAutoComplete> 

 

@code { 

    public class StockFinder 

    { 

        public string ID { get; set; } 

        public string Text { get; set; } 

    } 

    public List<StockFinder> Games = new List<StockFinder>() 

{ 

        new StockFinder(){ ID= "Game1", Text= "American Football" }, 

        new StockFinder(){ ID= "Game2", Text= "Badminton" } 

    }; 

 

    public void onChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, StockFinder> args) 

    { 

 

    } 

} 

Kindly get back to us for further assistance. 

Regards, 

Sevvandhi N