SfAutoComplete

[Thijs van Rijswijk]

Hi,

I am using SfAutoComplete in a EditForm.

Is it possible after typing a few characters and select a value from the dropdown the textbox above get the value from the dropdown?

<SfAutoComplete @ref="laklantnummer" TValue="string" TItem="RelationCustomerDto" DataSource="relationCustomerList" @bind-Value="model.LaKlantNummer">

<AutoCompleteEvents TItem="RelationCustomerDto" TValue="string" ValueChange="@RelationCustomerIdChanged"></AutoCompleteEvents>

 <AutoCompleteFieldSettings Value="CustomerId"></AutoCompleteFieldSettings>

</SfAutoComplete>

Second question:

Is there a handler if no records found?

I think it's very usefull if not.

Best regards,

Thijs van Rijswijk

[Deepak Ramakrishnan]

Hi Thijs, 

 

Greetings from Syncfusion support. 

 

Query 1 : Is it possible after typing a few characters and select a value from the dropdown the textbox above get the value from the dropdown? 

 

Yes we can use ‘@bind-Value’ property for two way binding ,Once the value property get changed it will be reflected in the variable mapped to it .Kindly refer the below code for your reference. 

 

[Index.razor] 

<SfAutoComplete TValue="string" TItem="RelationCustomerDto" Placeholder="Autocomplete" DataSource="relationCustomerList" @bind-Value="LaKlantNummer"> 

 

    <AutoCompleteEvents TItem="RelationCustomerDto" TValue="string" CustomValueSpecifier="CustomValueHandler"></AutoCompleteEvents> 

 

    <AutoCompleteFieldSettings Value="ID"></AutoCompleteFieldSettings> 

 

</SfAutoComplete> 

 

 

<br /> 

 

<br /> 

 

<SfTextBox @bind-Value="@LaKlantNummer" Placeholder="Textbox"></SfTextBox> 

    

 

@code{ 

 

 

    public string LaKlantNummer { get; set; } 

} 

 

 

 

Query 2 : Is there a handler if no records found? 

 

Yes we can achieve the requirement by using ‘CustomValueSpecifier’ , It will get triggered once the typed value is not present/related to the values in the datatsource. 

 

[Index.razor] 

<SfAutoComplete TValue="string" TItem="RelationCustomerDto" Placeholder="Autocomplete" DataSource="relationCustomerList" @bind-Value="LaKlantNummer"> 

 

    <AutoCompleteEvents TItem="RelationCustomerDto" TValue="string" CustomValueSpecifier="CustomValueHandler"></AutoCompleteEvents> 

 

    <AutoCompleteFieldSettings Value="ID"></AutoCompleteFieldSettings> 

 

</SfAutoComplete> 

 

 

@code { 

public void CustomValueHandler(CustomValueSpecifierEventArgs<RelationCustomerDto> args) 

    { 

        message = "Custom value event triggered"; 

    } 

} 

 

Sample Link : https://www.syncfusion.com/downloads/support/forum/170088/ze/BlazorApp1172983901  

 

API documentation :  https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_CustomValueSpecifier  

 

 

Thanks, 

Deepak R. 

[Thijs van Rijswijk]

Hi,

Thank you.

Works like a charm.

Best regards.

[Deepak Ramakrishnan]

Hi Thijs, 

 

Thanks for your update. 

 

We are glad that your requirement has fulfilled . We are always happy to assist you if you need any further assistance. 

 

Thanks, 

Deepak R.