Filtering in React Auto complete component
8 Dec 202324 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 | Supported Types |
---|---|---|
StartsWith | Checks whether a value begins with the specified value. | String |
EndsWith | Checks whether a value ends with specified value. | String |
Contains | Checks whether a value contains with specified value. | String |
The following examples, data filtering is done with StartsWith
type.
[Class-component]
// 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'));
// 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]
// 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'));
// 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'));
Filter item count
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.
[Class-component]
// 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'));
// 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'));
<!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/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='sample' style="margin: 20px auto 0; width:250px;">
<div id='loader'>Loading....</div>
</div>
</body>
</html>
[Functional-component]
// 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'));
// 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'));
<!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/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='sample' style="margin: 20px auto 0; width:250px;">
<div id='loader'>Loading....</div>
</div>
</body>
</html>
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.
[Class-component]
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'));
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]
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'));
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 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.
[Class-component]
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'));
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]
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'));
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
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.
[Class-component]
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'));
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]
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'));
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'));