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