Bind Autocomplete with a data from a third-party API

[Maksim]

This is what I want to do :

1.  The user starts typing symbols in the autocomplete field.
   
2. OnInputAsync(string args) method is on
   
3. In this method data is downloaded from a third-party API service and the array of the objects linked to autocomplete is filled in
   
4. These objects are displayed in autocomplete as suggestion items

Example:

<SfAutoComplete TValue="string" TItem="Ticker" @oninput="@( e => { if (e.Value != null) { OnInputAsync(e.Value.ToString()); } })" Placeholder="e.g. TSLA" DataSource="@_tickers">

          <AutoCompleteEvents TItem="Ticker" TValue="string" OnValueSelect="@OnValueSelectHandler"></AutoCompleteEvents>

          <AutoCompleteFieldSettings Value="TickerSymbol"></AutoCompleteFieldSettings>

</SfAutoComplete>

@code{

     private Ticker[] _tickers;

     private async void OnInputAsync(string args)

     {

         _tickers = await Http.GetJsonAsync<Ticker[]>($"api/tickers/{args}");

     }

}

In this example, everything works as it must but with one exception - the data in suggestion items is not showed immediately, but after the next action, because they did not have time to load before loading the GUI.

Example:

•  Enter "A"
  
• - No records Found
  
• I delete "A"
  
• Elements starting with A are shown
  

How to fix it?

Without autocomplete I would do something like that:

@if (_tickers == null)

{

...

}

else

{

...

}

But how to use it together with autocomplete?

[Mohanraj Mathaiyan]

Hi Maksim,

We are the requirement. We will update the details in two business days (27^nd July 2022).

Regards,

Mohanraj M

[UdhayaKumar Duraisamy]

Hi Maksim,

Sorry for the inconvenience caused.

We suggest you set the FilterType property as contains to filter the data from datasource. For large amounts of data, we also recommend you use the EnableVirtualization property to improve the UI performance of the component. We have shared the API documentation for reference.

<SfAutoComplete TValue="string" TItem="EmployeeData"

    Placeholder="Select a name"

    Query="@RemoteQuery"

    Autofill="true"

    FilterType="Syncfusion.Blazor.DropDowns.FilterType.Contains"

    EnableVirtualization="true"

    @bind-Value="@EmployeeValue">

    <SfDataManager Url=https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Employees CrossDomain="true" Adaptor="Syncfusion.Blazor.Adaptors.ODataAdaptor"></SfDataManager>

    <AutoCompleteFieldSettings Value="FirstName" />

</SfAutoComplete>

Documentation :

              EnableVirtualization
: https://blazor.syncfusion.com/documentation/autocomplete/virtualization

              FilterType :
https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_2_FilterType

Sample
: https://www.syncfusion.com/downloads/support/directtrac/general/ze/AuctoComplete-812244909

Kindly try the above sample and let us know if this meets your requirement. If we misunderstood the query, we request you to provide additional details about the issue as mentioned below. This will help us validate the issue further and provide you with a better solution.

1. Simple issue reproducing runnable sample (or Modify the attached sample).
2. Exact issue details (Ex: Are you facing the issue in any particular scenario?).
3. If possible please attach the issue screen snippet/video illustration.

Regards,

Udhaya Kumar D