Filtering in React AutoComplete

4 Sep 202624 minutes to read

The React AutoComplete has built-in support for filtering the data items when allowFiltering is enabled. The filter operation starts as soon as you start typing characters in the component.

Change the filter type

The React AutoComplete applies the selected filter type for the search action. The available filterType options and their supported data types are:

The built-in filterType options apply to string data only. For numeric or boolean values, use the filtering event to implement custom filtering logic.

Filter Type	Description	Supported Types
StartsWith	Checks whether a value begins with the specified value.	String
EndsWith	Checks whether a value ends with the specified value.	String
Contains	Checks whether a value contains the specified value.	String

In the following example, data filtering is done with the StartsWith type.

[Class Component]

index.jsx

// import DataManager related classes
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
    // bind the DataManager instance to dataSource property
    searchData = new DataManager({
        adaptor: new ODataV4Adaptor,
        crossDomain: true,
        url: 'https://services.odata.org/V4/Northwind/Northwind.svc/'
    });
    // maps the appropriate column to fields property
    fields = { value: "ContactName" };
    // bind the Query instance to query property
    query = new Query().from('Suppliers').select(["SupplierID", "ContactName"]).take(10);
    // sort the resulted items
    sortOrder = 'Ascending';
    render() {
        return (
        // specifies the tag for render the AutoComplete component
        <AutoCompleteComponent id="atcelement" query={this.query} dataSource={this.searchData} fields={this.fields} placeholder="Find a customer" filterType="StartsWith" sortOrder={this.sortOrder}/>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));

index.tsx

// import DataManager related classes
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
import { SortOrder } from '@syncfusion/ej2-lists';
import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

export default class App extends React.Component<{}, {}> {
    // bind the DataManager instance to dataSource property
    private searchData: DataManager = new DataManager({
        adaptor: new ODataV4Adaptor,
        crossDomain: true,
        url: 'https://services.odata.org/V4/Northwind/Northwind.svc/'
    });
    // maps the appropriate column to fields property
    private fields: object = { value: "ContactName" };
    // bind the Query instance to query property
    private query: Query = new Query().from('Suppliers').select(["SupplierID", "ContactName"]).take(10);
    // sort the resulted items
    private sortOrder: SortOrder = 'Ascending';

    public render() {
        return (
             // specifies the tag for render the AutoComplete component
            <AutoCompleteComponent id="atcelement" query={this.query} dataSource={this.searchData} fields={this.fields} placeholder="Find a customer" filterType="StartsWith" sortOrder={this.sortOrder} />
        );
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));

[Functional Component]

index.jsx

// import DataManager related classes
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
    // bind the DataManager instance to dataSource property
    const searchData = new DataManager({
        adaptor: new ODataV4Adaptor,
        crossDomain: true,
        url: 'https://services.odata.org/V4/Northwind/Northwind.svc/'
    });
    // maps the appropriate column to fields property
    const fields = { value: "ContactName" };
    // bind the Query instance to query property
    const query = new Query().from('Suppliers').select(["SupplierID", "ContactName"]).take(10);
    // sort the resulted items
    const sortOrder = 'Ascending';
    return (
    // specifies the tag for render the AutoComplete component
    <AutoCompleteComponent id="atcelement" query={query} dataSource={searchData} fields={fields} placeholder="Find a customer" filterType="StartsWith" sortOrder={sortOrder}/>);
}
ReactDOM.render(<App />, document.getElementById('sample'));

index.tsx

// import DataManager related classes
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
import { SortOrder } from '@syncfusion/ej2-lists';
import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function App() {
    // bind the DataManager instance to dataSource property
    const searchData: DataManager = new DataManager({
        adaptor: new ODataV4Adaptor,
        crossDomain: true,
        url: 'https://services.odata.org/V4/Northwind/Northwind.svc/'
    });
    // maps the appropriate column to fields property
    const fields: object = { value: "ContactName" };
    // bind the Query instance to query property
    const query: Query = new Query().from('Suppliers').select(["SupplierID", "ContactName"]).take(10);
    // sort the resulted items
    const sortOrder: SortOrder = 'Ascending';

    return (
    // specifies the tag for render the AutoComplete component
        <AutoCompleteComponent id="atcelement" query={query} dataSource={searchData} fields={fields} placeholder="Find a customer" filterType="StartsWith" sortOrder={sortOrder} />
    );
}
ReactDOM.render(<App />, document.getElementById('sample'));

Debounce delay

You can use the debounceDelay property for filtering, enabling you to set a delay in milliseconds. This functionality reduces the frequency of filtering as you type, enhancing performance and responsiveness for a smoother user experience. By default, a debounce delay of 300 ms is set. The acceptable range is from 0 upward; setting it to 0 ms disables the debounce entirely and triggers filtering on every keystroke.

[Class Component]

index.jsx

import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
    // define the array of string
    sportsData = ['Badminton', 'Basketball', 'Cricket', 'Football', 'Golf', 'Hockey', 'Snooker', 'Tennis'];
    render() {
        return (
        // specifies the tag for render the AutoComplete component
        <AutoCompleteComponent id="atcelement" dataSource={this.sportsData} placeholder="Find a game" debounceDelay={300}/>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));

index.tsx

import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

export default class App extends React.Component<{}, {}> {

    // define the array of string
    private sportsData: string[] = ['Badminton', 'Basketball', 'Cricket', 'Football', 'Golf', 'Hockey', 'Snooker', 'Tennis'];

    public render() {
        return (
              // specifies the tag for render the AutoComplete component
            <AutoCompleteComponent id="atcelement" dataSource={this.sportsData} placeholder="Find a game" debounceDelay={300} />
        );
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));

[Functional Component]

index.jsx

import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
    // define the array of string
    const sportsData = ['Badminton', 'Basketball', 'Cricket', 'Football', 'Golf', 'Hockey', 'Snooker', 'Tennis'];
    return (
    // specifies the tag for render the AutoComplete component
    <AutoCompleteComponent id="atcelement" dataSource={sportsData} placeholder="Find a game" debounceDelay={300}/>);
}
ReactDOM.render(<App />, document.getElementById('sample'));

index.tsx

import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function App() {
    // define the array of string
    const sportsData: string[] = ['Badminton', 'Basketball', 'Cricket', 'Football', 'Golf', 'Hockey', 'Snooker', 'Tennis'];

    return (
    // specifies the tag for render the AutoComplete component
        <AutoCompleteComponent id="atcelement" dataSource={sportsData} placeholder="Find a game" debounceDelay={300}/>
    );
}
ReactDOM.render(<App />, document.getElementById('sample'));

Custom filtering

For advanced scenarios such as numeric, boolean, or server-side filtering that the built-in filterType options do not cover, handle the filtering event. This event passes a FilteringEventArgs object that contains the current text, the updateData function to pass filtered results back to the component, and the current dataSource. Call updateData(data, query) inside the handler to populate the popup with your custom results.

Filter item count

You can limit the number of filtered suggestion items shown through the suggestionCount property of React AutoComplete. The default value is 20. Setting it to 0 shows all matching items; negative values are treated as the default.

In the following example, the suggestion list item count is restricted to 2.

[Class Component]

index.jsx

// import DataManager related classes
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
    // bind the DataManager instance to dataSource property
    customerData = new DataManager({
        adaptor: new ODataV4Adaptor,
        crossDomain: true,
        url: 'https://services.odata.org/V4/Northwind/Northwind.svc/'
    });
    // bind the Query instance to query property
    query = new Query().from('Customers').select(['ContactName', 'CustomerID']);
    // maps the appropriate column to fields property
    fields = { value: 'ContactName' };
    // sort the resulted items
    sortOrder = 'Ascending';
    render() {
        return (
        // specifies the tag for render the AutoComplete component
        <AutoCompleteComponent id="atcelement" query={this.query} dataSource={this.customerData} fields={this.fields} placeholder="Find a customer" sortOrder={this.sortOrder} suggestionCount={2} filterType="StartsWith"/>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));

index.tsx

// import DataManager related classes
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
import { SortOrder } from '@syncfusion/ej2-lists';
import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

export default class App extends React.Component<{}, {}> {
    // bind the DataManager instance to dataSource property
    private customerData: DataManager = new DataManager({
        adaptor: new ODataV4Adaptor,
        crossDomain: true,
        url: 'https://services.odata.org/V4/Northwind/Northwind.svc/'
    });
    // bind the Query instance to query property
    private query: Query = new Query().from('Customers').select(['ContactName', 'CustomerID']);
    // maps the appropriate column to fields property
    private fields: object = { value: 'ContactName' };
    // sort the resulted items
    private sortOrder: SortOrder = 'Ascending';

    public render() {
        return (
              // specifies the tag for render the AutoComplete component
            <AutoCompleteComponent id="atcelement" query={this.query} dataSource={this.customerData}
            fields={this.fields} placeholder="Find a customer" sortOrder={this.sortOrder} suggestionCount={2} filterType= "StartsWith"/>
        );
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React AutoComplete</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-inputs/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-dropdowns/styles/tailwind3.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
    <div id='sample' style="margin: 20px auto 0; width:250px;">
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

[Functional Component]

index.jsx

// import DataManager related classes
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
    // bind the DataManager instance to dataSource property
    const customerData = new DataManager({
        adaptor: new ODataV4Adaptor,
        crossDomain: true,
        url: 'https://services.odata.org/V4/Northwind/Northwind.svc/'
    });
    // bind the Query instance to query property
    const query = new Query().from('Customers').select(['ContactName', 'CustomerID']);
    // maps the appropriate column to fields property
    const fields = { value: 'ContactName' };
    // sort the resulted items
    const sortOrder = 'Ascending';
    return (
    // specifies the tag for render the AutoComplete component
    <AutoCompleteComponent id="atcelement" query={query} dataSource={customerData} fields={fields} placeholder="Find a customer" sortOrder={sortOrder} suggestionCount={2} filterType="StartsWith"/>);
}
ReactDOM.render(<App />, document.getElementById('sample'));

index.tsx

// import DataManager related classes
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
import { SortOrder } from '@syncfusion/ej2-lists';
import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function App() {
    // bind the DataManager instance to dataSource property
    const customerData: DataManager = new DataManager({
        adaptor: new ODataV4Adaptor,
        crossDomain: true,
        url: 'https://services.odata.org/V4/Northwind/Northwind.svc/'
    });
    // bind the Query instance to query property
    const query: Query = new Query().from('Customers').select(['ContactName', 'CustomerID']);
    // maps the appropriate column to fields property
    const fields: object = { value: 'ContactName' };
    // sort the resulted items
    const sortOrder: SortOrder = 'Ascending';

    return (
    // specifies the tag for render the AutoComplete component
        <AutoCompleteComponent id="atcelement" query={query} dataSource={customerData}
            fields={fields} placeholder="Find a customer" sortOrder={sortOrder} suggestionCount={2} filterType= "StartsWith"/>
    );
}
ReactDOM.render(<App />, document.getElementById('sample'));

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React AutoComplete</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-inputs/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-dropdowns/styles/tailwind3.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
    <div id='sample' style="margin: 20px auto 0; width:250px;">
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

Set a minimum filter length

You can set the minimum number of characters required to trigger filtering through the minLength property of the React AutoComplete. The default value is 1. For remote data binding with DataManager, see Binding remote data.

In the following example, the remote request does not fetch the search data until the search key contains three characters.

[Class Component]

index.jsx

import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
    // bind the DataManager instance to dataSource property
    searchData = new DataManager({
        adaptor: new ODataV4Adaptor,
        crossDomain: true,
        url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers'
    });
    // maps the appropriate column to fields property
    fields = { value: 'ContactName' };
    // bind the Query instance to query property
    query = new Query().select(['ContactName', 'CustomerID']).take(10);
    // sort the resulted items
    sortOrder = 'Ascending';
    render() {
        return (
        // specifies the tag for render the AutoComplete component
        <AutoCompleteComponent id="atcelement" query={this.query} dataSource={this.searchData} sortOrder={this.sortOrder} filterType="StartsWith" fields={this.fields} placeholder="Find a customer" minLength={3}/>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));

index.tsx

import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
import { SortOrder } from '@syncfusion/ej2-lists';
import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

export default class App extends React.Component<{}, {}> {
    // bind the DataManager instance to dataSource property
    private searchData: DataManager = new DataManager({
        adaptor: new ODataV4Adaptor,
        crossDomain: true,
        url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers'
    });
    // maps the appropriate column to fields property
    private fields: object = { value: 'ContactName' };
    // bind the Query instance to query property
    private query: Query = new Query().select(['ContactName', 'CustomerID']).take(10);
    // sort the resulted items
    private sortOrder: SortOrder = 'Ascending';
    public render() {
        return (
             // specifies the tag for render the AutoComplete component
            <AutoCompleteComponent id="atcelement" query={this.query} dataSource={this.searchData} sortOrder={this.sortOrder} filterType= "StartsWith" fields={this.fields} placeholder="Find a customer" minLength={3}/>
        );
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));

[Functional Component]

index.jsx

import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
    // bind the DataManager instance to dataSource property
    const searchData = new DataManager({
        adaptor: new ODataV4Adaptor,
        crossDomain: true,
        url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers'
    });
    // maps the appropriate column to fields property
    const fields = { value: 'ContactName' };
    // bind the Query instance to query property
    const query = new Query().select(['ContactName', 'CustomerID']).take(10);
    // sort the resulted items
    const sortOrder = 'Ascending';
    return (
    // specifies the tag for render the AutoComplete component
    <AutoCompleteComponent id="atcelement" query={query} dataSource={searchData} sortOrder={sortOrder} filterType="StartsWith" fields={fields} placeholder="Find a customer" minLength={3}/>);
}
ReactDOM.render(<App />, document.getElementById('sample'));

index.tsx

import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
import { SortOrder } from '@syncfusion/ej2-lists';
import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function App() {
    // bind the DataManager instance to dataSource property
    const searchData: DataManager = new DataManager({
        adaptor: new ODataV4Adaptor,
        crossDomain: true,
        url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers'
    });
    // maps the appropriate column to fields property
    const fields: object = { value: 'ContactName' };
    // bind the Query instance to query property
    const query: Query = new Query().select(['ContactName', 'CustomerID']).take(10);
    // sort the resulted items
    const sortOrder: SortOrder = 'Ascending';
    return (
    // specifies the tag for render the AutoComplete component
        <AutoCompleteComponent id="atcelement" query={query} dataSource={searchData} sortOrder={sortOrder} filterType= "StartsWith" fields={fields} placeholder="Find a customer" minLength={3}/>
    );
}
ReactDOM.render(<App />, document.getElementById('sample'));

Case-sensitive filtering

Data items can be filtered either with or without case sensitivity. This can be done by setting the ignoreCase property of the React AutoComplete. The case-sensitivity behavior depends on the underlying data source.

The following sample depicts how to filter the data with case-sensitive mode.

[Class Component]

index.jsx

import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
    // bind the DataManager instance to dataSource property
    searchData = ['ram', 'Ravi', 'suresh', 'Suresh'];
    // maps the appropriate column to fields property
    fields = { value: "ContactName" };
    // sort the resulted items
    sortOrder = 'Ascending';
    render() {
        return (
        // specifies the tag for render the AutoComplete component
        <AutoCompleteComponent id="atcelement" dataSource={this.searchData} filterType="StartsWith" sortOrder={this.sortOrder} fields={this.fields} placeholder="eg: Ravi" ignoreCase={false}/>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));

index.tsx

import { SortOrder } from '@syncfusion/ej2-lists';
import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

export default class App extends React.Component<{}, {}> {
    // bind the DataManager instance to dataSource property
    private searchData: string[] = ['ram', 'Ravi', 'suresh', 'Suresh'];
    // maps the appropriate column to fields property
    private fields: object = { value: "ContactName" };
    // sort the resulted items
    private sortOrder: SortOrder = 'Ascending';


    public render() {
        return (
            // specifies the tag for render the AutoComplete component
            <AutoCompleteComponent id="atcelement" dataSource={this.searchData} filterType= "StartsWith" sortOrder={this.sortOrder} fields={this.fields} placeholder="eg: Ravi" ignoreCase={false} />
        );
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));

[Functional Component]

index.jsx

import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
    // bind the DataManager instance to dataSource property
    const searchData = ['ram', 'Ravi', 'suresh', 'Suresh'];
    // maps the appropriate column to fields property
    const fields = { value: "ContactName" };
    // sort the resulted items
    const sortOrder = 'Ascending';
    return (
    // specifies the tag for render the AutoComplete component
    <AutoCompleteComponent id="atcelement" dataSource={searchData} filterType="StartsWith" sortOrder={sortOrder} fields={fields} placeholder="eg: Ravi" ignoreCase={false}/>);
}
ReactDOM.render(<App />, document.getElementById('sample'));

index.tsx

import { SortOrder } from '@syncfusion/ej2-lists';
import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function App() {
    // bind the DataManager instance to dataSource property
    const searchData: string[] = ['ram', 'Ravi', 'suresh', 'Suresh'];
    // maps the appropriate column to fields property
    const fields: object = { value: "ContactName" };
    // sort the resulted items
    const sortOrder: SortOrder = 'Ascending';
    return (
    // specifies the tag for render the AutoComplete component
        <AutoCompleteComponent id="atcelement" dataSource={searchData} filterType= "StartsWith" sortOrder={sortOrder} fields={fields} placeholder="eg: Ravi" ignoreCase={false} />
    );
}
ReactDOM.render(<App />, document.getElementById('sample'));

Diacritics filtering

The React AutoComplete supports diacritics filtering, which ignores the diacritics and makes it easier to filter the results in international character lists when the ignoreAccent property is enabled. The default value of ignoreAccent is false.

In the following sample, data with diacritics are bound as the dataSource for the React AutoComplete.

[Class Component]

index.jsx

import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
    diacriticsData = [
        'Aeróbics',
        'Aeróbics en Agua',
        'Aerografía',
        'Aeromodelaje',
        'Águilas',
        'Ajedrez',
        'Ala Delta',
        'Álbumes de Música',
        'Alusivos',
        'Análisis de Escritura a Mano'
    ];
    render() {
        return (<AutoCompleteComponent id="diacritics" ignoreAccent={true} dataSource={this.diacriticsData} placeholder="e.g: aero"/>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));

index.tsx

import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

export default class App extends React.Component<{}, {}> {
    private diacriticsData: string[] = [
    'Aeróbics',
    'Aeróbics en Agua',
    'Aerografía',
    'Aeromodelaje',
    'Águilas',
    'Ajedrez',
    'Ala Delta',
    'Álbumes de Música',
    'Alusivos',
    'Análisis de Escritura a Mano'];

  public render() {
    return (
            <AutoCompleteComponent id="diacritics" ignoreAccent={true} dataSource={this.diacriticsData} placeholder="e.g: aero" />
    );
  }
}
ReactDOM.render(<App />, document.getElementById('sample'));

[Functional Component]

index.jsx

import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
    const diacriticsData = [
        'Aeróbics',
        'Aeróbics en Agua',
        'Aerografía',
        'Aeromodelaje',
        'Águilas',
        'Ajedrez',
        'Ala Delta',
        'Álbumes de Música',
        'Alusivos',
        'Análisis de Escritura a Mano'
    ];
    return (<AutoCompleteComponent id="diacritics" ignoreAccent={true} dataSource={diacriticsData} placeholder="e.g: aero"/>);
}
ReactDOM.render(<App />, document.getElementById('sample'));

index.tsx

import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function App() {
    const diacriticsData: string[] = [
    'Aeróbics',
    'Aeróbics en Agua',
    'Aerografía',
    'Aeromodelaje',
    'Águilas',
    'Ajedrez',
    'Ala Delta',
    'Álbumes de Música',
    'Alusivos',
    'Análisis de Escritura a Mano'];

    return (
            <AutoCompleteComponent id="diacritics" ignoreAccent={true} dataSource={diacriticsData} placeholder="e.g: aero" />
    );
}
ReactDOM.render(<App />, document.getElementById('sample'));

See also

• How to achieve autofill while filtering
• How to group the data using header
• How to highlight the search data