AutoCompleteComponent - search results (call API request) only if you type input Value

Question

I would like to prepare AutoCompleteComponent with option search as you type but without loading whole data into DataManager. I would like to call api request only for input value inside component.

At the begining I have empty list and if I enter some phrase value into field I would like to call api with this phrase as filter parameter and return results for component results list.

Here is an example from MUI library:
https://mui.com/material-ui/react-autocomplete/#search-as-you-type

Is it possible to create the same functionality in SyncFusion AutoCompleteComponent?

Kokila Poovendran · Accepted Answer

Hi Karol Statek,We understand that you now have some specific requirements related to DataManager and Query, such as customizing the "noRecordsTemplate" and implementing filtering with a debounce delay while making API requests.To customize the "noRecordsTemplate" in your application, you can refer to the following documentation link for more details:Documentation link:https://ej2.syncfusion.com/react/documentation/auto-complete/templates#no-records-templateTo address these additional concerns, we have prepared a comprehensive sample that demonstrates how to achieve the desired behavior. In this sample, we have used the filtering event and incorporated the debounce concept to fetch the dataSource and query from the server end based on the filtering action.Sample: https://stackblitz.com/edit/react-xdhazr-qebuzd?file=index.jsHere's the code snippet of the sample:const onFilter = (e) => {    var data1 = new DataManager({      url: 'https://ej2services.syncfusion.com/production/web-services/api/Employees',      adaptor: new WebApiAdaptor(),      crossDomain: true,    });    var dataValue;    data1      .executeQuery(new Query().where('FirstName', 'StartsWith', e.text, true))      .then((event) => {        dataValue = event.result;        e.updateData(dataValue.result, null);      })      .catch((e) => true);  };

Mallesh Ravi Chandran · Answer

Hi karol,

To achieve the desired behavior, you can enable custom filtering and initialize the data source as empty. Then, in the custom filtering implementation, you can update the data source by making an API request with the input value as the filter parameter. This way, you will retrieve only the relevant results for the AutoCompleteComponent's results list based on the entered phrase.

API Reference : https://ej2.syncfusion.com/react/documentation/api/auto-complete/#filtering

Sample : https://stackblitz.com/edit/react-xdhazr-fysokq?file=index.js

Regards,

Mallesh

Karol Statek · Answer

Thanks for the answer, generally it resolve my previous problem. But in this scenario I have lock few option related with DataManager and Query for example 'loading spinner' in case when data are loaded from API. In case if I will start with empty datasource - users always will see 'noRecordsTemplate' (no information that some data are actually downlading from API).

I was also thinking if it is possible to use the same thing (filtering) with working with DataManager and Query instead? If I had definition of some basic query - it looks that query is trying automatically filter results inside datesource. As a next step is runing onFiltering function.

In my case I would like to enter some phrase into field (with small debounce delay) - and after that run request to API using DataManager and query.

  taxCodesList = new DataManager({
    adaptor: new ODataV4Adaptor,
    crossDomain: true,
    url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers'
  });

  taxCodesListQuery = new Query().select(['ContactName', 'CustomerID']).take(6);

const syncFusionAutoComplete = {
    create: () => {
      element = document.createElement('input');
      return element;
    },
    destroy: () => {

      if (dropdownobj) { dropdownobj.destroy() };
    },
    read: () => {
      console.log('dropdownobj obj val')
      console.log(dropdownobj)
      return dropdownobj.value;
    },
    write: (args) => {
      console.log('new AutoComplete')

      dropdownobj = new AutoComplete({
        id: `taxCodeAutoComplete_${args.rowData.lineNo}`,
        fields: { value: 'CustomerID', text: 'ContactName' },
        value: args.rowData[args.column.field], 
        dataSource: taxCodesList,
        query: taxCodesListQuery,
        autofill: false,
        allowCustom: false,
        allowFiltering: false,
        filtering: debounce(onFiltering.bind(this), 500),
        placeholder: "###Find a tax code !!!!!!!!",
        noRecordsTemplate: popupResultsInfo,
      });

      dropdownobj.appendTo(element)

    }
  }