Filtering in Angular Auto complete component
27 Apr 202413 minutes to read
The AutoComplete has built-in support to filter data items. 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 shows the data filtering is done with StartsWith
type.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { AutoCompleteModule } from '@syncfusion/ej2-angular-dropdowns'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { Component } from '@angular/core';
//import DataManager related classes
import { Query, DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
@Component({
imports: [
FormsModule, ReactiveFormsModule, AutoCompleteModule, ButtonModule
],
standalone: true,
selector: 'app-root',
// specifies the template string for the AutoComplete component
template: `<ejs-autocomplete id='atcelement' [dataSource]='sportsData' [fields]='fields' [placeholder]='text' [query]='query' [filterType]='filterType' [sortOrder]='sorting'></ejs-autocomplete>`
})
export class AppComponent {
constructor() {
}
//bind the DataManager instance to dataSource property
public sportsData: DataManager = new DataManager({
url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers',
adaptor: new ODataV4Adaptor,
crossDomain: true
});
// maps the appropriate column to fields property
public fields: Object = { value: 'ContactName' };
//bind the Query instance to query property
public query: Query = new Query().select(['ContactName', 'CustomerID']).take(6);
//set the placeholder to AutoComplete input
public text: string = "Find a customer";
//set the filterType to searching operation
public filterType: string='StartsWith';
//sort the result items
public sorting: string = 'Ascending';
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
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 5.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { AutoCompleteModule } from '@syncfusion/ej2-angular-dropdowns'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { Component } from '@angular/core';
//import DataManager related classes
import { Query, DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
@Component({
imports: [
FormsModule, ReactiveFormsModule, AutoCompleteModule, ButtonModule
],
standalone: true,
selector: 'app-root',
// specifies the template string for the AutoComplete component
template: `<ejs-autocomplete id='atcelement' [dataSource]='sportsData' [fields]='fields' [placeholder]='text' [query]='query' [filterType]='filterType' [sortOrder]='sorting' [suggestionCount]='suggestionCount'></ejs-autocomplete>`
})
export class AppComponent {
constructor() {
}
//bind the DataManager instance to dataSource property
public sportsData: DataManager = new DataManager({
url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers',
adaptor: new ODataV4Adaptor,
crossDomain: true
});
// maps the appropriate column to fields property
public fields: Object = { value: 'ContactName' };
//bind the Query instance to query property
public query: Query = new Query().select(['ContactName', 'CustomerID']);
//set the placeholder to AutoComplete input
public text: string = "Find a customer";
//set the filterType to searching operation
public filterType: string='StartsWith';
//sort the result items
public sorting: string = 'Ascending';
//set the suggestionCount to show the maximum suggestion list item
public suggestionCount: Number= 5;
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
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 doesn’t fetch the search data, until the search key contains three characters.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { AutoCompleteModule } from '@syncfusion/ej2-angular-dropdowns'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { Component } from '@angular/core';
//import DataManager related classes
import { Query, DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
@Component({
imports: [
FormsModule, ReactiveFormsModule, AutoCompleteModule, ButtonModule
],
standalone: true,
selector: 'app-root',
// specifies the template string for the AutoComplete component
template: `<ejs-autocomplete id='atcelement' [dataSource]='sportsData' [fields]='fields' [placeholder]='text' [query]='query' [filterType]='filterType' [sortOrder]='sorting' [minLength]='minLength'></ejs-autocomplete>`
})
export class AppComponent {
constructor() {
}
//bind the DataManager instance to dataSource property
public sportsData: DataManager = new DataManager({
url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers',
adaptor: new ODataV4Adaptor,
crossDomain: true
});
// maps the appropriate column to fields property
public fields: Object = { value: 'ContactName' };
//bind the Query instance to query property
public query: Query = new Query().select(['ContactName', 'CustomerID']);
//set the placeholder to AutoComplete input
public text: string = "Find a customer";
//set the filterType to searching operation
public filterType: string='StartsWith';
//sort the result items
public sorting: string = 'Ascending';
//set the minLength to restrict the remote request until search key contains 3 characters.
public minLength: Number = 3;
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Case sensitive filtering
Data items can be filtered either with or without case sensitivity using the DataManager. This can be done by setting the ignoreCase
property of AutoComplete.
The following sample depicts how to filter the data with case-sensitive.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { AutoCompleteModule } from '@syncfusion/ej2-angular-dropdowns'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { Component } from '@angular/core';
@Component({
imports: [
FormsModule, ReactiveFormsModule, AutoCompleteModule, ButtonModule
],
standalone: true,
selector: 'app-root',
// specifies the template string for the AutoComplete component
template: `<ejs-autocomplete id='atcelement' [dataSource]='data' [placeholder]='text' [filterType]='filterType' [sortOrder]='sorting' [ignoreCase]='ignoreCase'></ejs-autocomplete>`
})
export class AppComponent {
constructor() {
}
//bind the DataManager instance to dataSource property
public data: string[] = ['Badminton', 'Basketball', 'Cricket', 'Football', 'Golf', 'Gymnastics', 'Hockey', 'Tennis'];
//set the placeholder to AutoComplete input
public text: string = "Find a game Eg: FootBall";
//set the filterType to searching operation
public filterType: string='StartsWith';
//sort the result items
public sorting: string = 'Ascending';
//set the minLength to restrict the remote request until search key contains 3 characters.
public ignoreCase: Boolean = false;
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
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.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { AutoCompleteModule } from '@syncfusion/ej2-angular-dropdowns'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { Component } from '@angular/core';
@Component({
imports: [
FormsModule, ReactiveFormsModule, AutoCompleteModule, ButtonModule
],
standalone: true,
selector: 'app-root',
// specifies the template string for the DropDownList component with change event
template: ` <ejs-autocomplete id='diacritics' [dataSource]='data' [ignoreAccent]='true' placeholder='e.g. aero'>
</ejs-autocomplete>`
})
export class AppComponent {
constructor() {
}
// create local data
public data: 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'];
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));