React

Search results

Filtering in React AutoComplete component

24 Jun 2022 / 5 minutes to read

The 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

Determines on which filter type, the component needs to be considered on search action. The available filterType and its supported data types are

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

The following examples, data filtering is done with StartsWith type.

Source

Preview

index.jsx

index.html

index.tsx

// 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 {
    constructor() {
        super(...arguments);
        // bind the DataManager instance to dataSource property
        this.searchData = new DataManager({
            adaptor: new ODataV4Adaptor,
            crossDomain: true,
            url: 'https://services.odata.org/V4/Northwind/Northwind.svc/'
        });
        // maps the appropriate column to fields property
        this.fields = { value: "ContactName" };
        // bind the Query instance to query property
        this.query = new Query().from('Suppliers').select(["SupplierID", "ContactName"]).take(10);
        // sort the resulted items
        this.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'));

<!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="//cdn.syncfusion.com/ej2/20.1.58/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-dropdowns/styles/material.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>

// 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'));

You can specify the filter suggestion item count through suggestionCount property of AutoComplete.

The following examples, to restrict the suggestion list item counts as 2.

Source

Preview

index.jsx

index.html

index.tsx

// 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 {
    constructor() {
        super(...arguments);
        // bind the DataManager instance to dataSource property
        this.customerData = new DataManager({
            adaptor: new ODataV4Adaptor,
            crossDomain: true,
            url: 'https://services.odata.org/V4/Northwind/Northwind.svc/'
        });
        // bind the Query instance to query property
        this.query = new Query().from('Customers').select(['ContactName', 'CustomerID']);
        // maps the appropriate column to fields property
        this.fields = { value: 'ContactName' };
        // sort the resulted items
        this.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'));

<!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="//cdn.syncfusion.com/ej2/20.1.58/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-dropdowns/styles/material.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>

// 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'));

Limit the minimum filter character

You can set the limit for the character count to filter the data on the AutoComplete. This can be done by set the minLength property to AutoComplete.

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

Source

Preview

index.jsx

index.html

index.tsx

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 {
    constructor() {
        super(...arguments);
        // bind the DataManager instance to dataSource property
        this.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
        this.fields = { value: 'ContactName' };
        // bind the Query instance to query property
        this.query = new Query().select(['ContactName', 'CustomerID']).take(10);
        // sort the resulted items
        this.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'));

<!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="//cdn.syncfusion.com/ej2/20.1.58/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-dropdowns/styles/material.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>

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'));

Case sensitive filtering

Data items can be filtered either with or without case sensitivity using the DataManager. This can be done by set the ignoreCase property of AutoComplete.

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

Source

Preview

index.jsx

index.html

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 {
    constructor() {
        super(...arguments);
        // bind the DataManager instance to dataSource property
        this.searchData = ['ram', 'Ravi', 'suresh', 'Suresh'];
        // maps the appropriate column to fields property
        this.fields = { value: "ContactName" };
        // sort the resulted items
        this.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'));

<!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="//cdn.syncfusion.com/ej2/20.1.58/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-dropdowns/styles/material.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>

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'));

Diacritics Filtering

An AutoComplete supports diacritics filtering which will ignore the diacritics and makes it easier to filter the results in international characters lists when the ignoreAccent is enabled.

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

Source

Preview

index.jsx

index.html

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 {
    constructor() {
        super(...arguments);
        this.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'));

<!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="//cdn.syncfusion.com/ej2/20.1.58/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-dropdowns/styles/material.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>

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'));

Filtering in React AutoComplete component

Change the filter type

Filter item count

Limit the minimum filter character

Case sensitive filtering

Diacritics Filtering

See Also