How to trigger auto-complete to fire programatically

I have an autocomplete control that is working normally using a custom DataAdapter that calls an external API  to populate the dropdown when the user enters at least 3 chars.

However, I also want to trigger it based on another control; i.e. click an icon to trigger the control to fire the adapter and load without entry into the dropdown. The server API will provide default autocomplete results based on no value/entry.

How can I do this programmatically?

Thanks in advance.

Adam


6 Replies

KP Kokila Poovendran Syncfusion Team January 8, 2024 05:50 AM UTC

Hi Adam Morrison,

Thank you for reaching out to us! We have carefully reviewed your query and created a code snippet that aligns with your requirements. Please find the code snippet below:

<SfAutoComplete @ref="AutoObj"  TValue="string" TItem="OrderDetails">

    <SfDataManager AdaptorInstance="@typeof(CustomAdaptor)" Adaptor="Syncfusion.Blazor.Adaptors.CustomAdaptor"></SfDataManager>

    <AutoCompleteFieldSettings Value="CustomerID"></AutoCompleteFieldSettings>

</SfAutoComplete>

 

<button @onclick="FetchDefaultData">Fetch Default Data</button>

 

@code{

 

    SfAutoComplete<string, OrderDetails> AutoObj;

 

    public class OrderDetails

    {

        public int? OrderID { get; set; }

        public string CustomerID { get; set; }

        public int? EmployeeID { get; set; }

        public double? Freight { get; set; }

        public string ShipCity { get; set; }

        public bool Verified { get; set; }

        public DateTime? OrderDate { get; set; }

        public string ShipName { get; set; }

        public string ShipCountry { get; set; }

        public DateTime? ShippedDate { get; set; }

        public string ShipAddress { get; set; }

 

        public List<OrderDetails> GetData()

        {

            List<OrderDetails> Data = new List<OrderDetails>();

            Data.Add(new OrderDetails() { OrderID = 1, CustomerID = "Customer1" });

            Data.Add(new OrderDetails() { OrderID = 2, CustomerID = "Customer2" });

            Data.Add(new OrderDetails() { OrderID = 3, CustomerID = "Customer3" });

            Data.Add(new OrderDetails() { OrderID = 4, CustomerID = "Customer4" });

            Data.Add(new OrderDetails() { OrderID = 5, CustomerID = "Customer5" });

            Data.Add(new OrderDetails() { OrderID = 6, CustomerID = "Customer6" });

            Data.Add(new OrderDetails() { OrderID = 7, CustomerID = "Customer7" });

            return Data;

        }

    }

 

    async Task FetchDefaultData()

    {

        // Call your API to get default autocomplete results

        List<OrderDetails> defaultData = await FetchDataFromApi();

 

        AutoObj.DataSource = defaultData;

    }

 

    async Task<List<OrderDetails>> FetchDataFromApi()

    {

        //await Task.Delay(1000); // Simulate API call delay

        return new List<OrderDetails>

        {

            new OrderDetails { OrderID = 11, CustomerID = "CustomerA" },

            new OrderDetails { OrderID = 12, CustomerID = "CustomerB" },

            new OrderDetails { OrderID = 13, CustomerID = "CustomerC" },

            new OrderDetails { OrderID = 14, CustomerID = "CustomerD" },

            new OrderDetails { OrderID = 15, CustomerID = "CustomerE" },

            new OrderDetails { OrderID = 16, CustomerID = "CustomerF" },

            new OrderDetails { OrderID = 17, CustomerID = "CustomerG" }

        };

    }

 

   

 

    public class CustomAdaptor : DataAdaptor

    {

        static readonly HttpClient client = new HttpClient();

        public static List<OrderDetails> order = new OrderDetails().GetData();

        public override object Read(DataManagerRequest dm, string key = null)

        {

            IEnumerable<OrderDetails> DataSource = order;

            if (dm.Search != null && dm.Search.Count > 0)

            {

                DataSource = DataOperations.PerformSearching(DataSource, dm.Search);  //Search

            }

            if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting

            {

                DataSource = DataOperations.PerformSorting(DataSource, dm.Sorted);

            }

            if (dm.Where != null && dm.Where.Count > 0) //Filtering

            {

                DataSource = DataOperations.PerformFiltering(DataSource, dm.Where, dm.Where[0].Operator);

            }

            int count = DataSource.Cast<OrderDetails>().Count();

            if (dm.Skip != 0)

            {

                DataSource = DataOperations.PerformSkip(DataSource, dm.Skip);         //Paging

            }

            if (dm.Take != 0)

            {

                DataSource = DataOperations.PerformTake(DataSource, dm.Take);

            }

            return dm.RequiresCounts ? new DataResult() { Result = DataSource, Count = count } : (object)DataSource;

       }

    }

}



This code snippet is designed to trigger the AutoComplete control programmatically based on another control, such as clicking an icon. The FetchDefaultData method simulates an API call to get default autocomplete results, which are then assigned to the AutoComplete control's DataSource.


Feel free to modify the code snippet according to your specific needs. If you have any further questions or need additional assistance, please don't hesitate to reach out. We are here to help!


Attachment: BlazorServerProject_b73c5396.zip


AM Adam Morrison January 31, 2024 08:13 PM UTC

Hello,


Thank you for the reply. Unfortunately, I am unable to get this working.

I have roughly the same setup in the data adapter as you, and have implemented the onclick to set datasource. However, it is not working as expected.

The data is updated but the dropdown does not open. Instead, after clicking the button and setting the datasource, I can then type into the dropdown and the autocomplete filters the data set in my onclick event. The custom adapter no longer fires.

1) I would expect the dropdown to open after setting datasource in onclick.

2) I would expect the custom adapter to continue working if the user doesn't select any thing from the default dataset and instead types into the textbox and allows the normal adapter logic to fire.


Thoughts?

Image_5786_1706729726856






KP Kokila Poovendran Syncfusion Team February 1, 2024 02:18 PM UTC

Hi Adam Morrison

After reviewing your requirements, we've made adjustments to the code snippet to address the issues you encountered. Please find the updated code snippet below:



async Task FetchDefaultData()

{

    // Call your API to get default autocomplete results

    List<OrderDetails> defaultData = await FetchDataFromApi();

 

    AutoObj.DataSource = defaultData;

 

    AutoObj.ShowPopupAsync();

}



In the revised code snippet, we added the ShowPopupAsync() method to ensure that the dropdown opens automatically after setting the datasource in the FetchDefaultData() method. This adjustment should align with your expectation for the dropdown to open after setting the datasource.


We believe this modification will help resolve the issue you described. Please incorporate these changes into your implementation and let us know if you encounter any further concerns or issues.


Thank you for your patience and cooperation as we work to ensure the smooth functionality of your application.



Attachment: SyncfusionBlazorApp1_b21fe906.zip


AM Adam Morrison February 1, 2024 09:33 PM UTC

Thanks for the reply. Still not working as expected.


Two Scenarios:

Scenario 1: User enters text and doesn't click button default.

All good, works as expected ... adapter called and results displayed.


Scenario 2: Click button to show defaults

I can get the results to show, no problem. However, once showing defaults, the standard auto-complete no longer works. 

a) If the user doesn't select a default but enters in some other text (while drop down open), it should then fallback to the normal search (refresh, load from adapter). Currently, it starts filtering on the default data and does not call the custom adapter logic. 

b) Even if they close the dropdown (click away or click x icon), entering text still filters on the original default data and the adapter is not called.


How do I clear the default data in the datasource to allow the custom adapter to fire again?


Thoughts



AM Adam Morrison February 6, 2024 02:11 PM UTC

Hello. Any additional insight here?



KP Kokila Poovendran Syncfusion Team February 22, 2024 01:25 PM UTC

Hi Adam Morrison,


We have reviewed your requirement and have prepared a sample that fulfills your needs. The sample triggers the ReadyAsync method when we dynamically update the DataSource by calling the "RefreshDataAsync" method. Below is the code snippet:



 

    async Task FetchDefaultData()

    {

        // Update the data source with new data

        Orders = Enumerable.Range(0, 5).Select(x => new Order()

            {

                OrderID = 2000 + x,

                CustomerID = (new string[] { "NewCustomer1", "NewCustomer2", "NewCustomer3", "NewCustomer4", "NewCustomer5" })[x],

                Freight = 3.5 * x,

            }).ToList();

 

        // Refresh the AutoComplete component with the new data source

        autoObj.RefreshDataAsync();

      

 

    }



Please incorporate this code snippet into your project. If you have any further concerns or queries, feel free to let us know.


Attachment: BlazorServerProject_db6872b1.zip

Loader.
Up arrow icon