Blazor Ebook
A quick guide to getting started with learning and improving your skills using Blazor technology.
The AutoComplete has built-in support to filter data items. 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 shows the data filtering is done with StartsWith type.
import { Component } from '@angular/core';
//import DataManager related classes
import { Query, DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
@Component({
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 { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { AutoCompleteModule } from '@syncfusion/ej2-angular-dropdowns';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,FormsModule, ReactiveFormsModule, AutoCompleteModule, ButtonModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);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 { Component } from '@angular/core';
//import DataManager related classes
import { Query, DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
@Component({
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 { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { AutoCompleteModule } from '@syncfusion/ej2-angular-dropdowns';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,FormsModule, ReactiveFormsModule, AutoCompleteModule, ButtonModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);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 { Component } from '@angular/core';
//import DataManager related classes
import { Query, DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
@Component({
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 { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { AutoCompleteModule } from '@syncfusion/ej2-angular-dropdowns';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,FormsModule, ReactiveFormsModule, AutoCompleteModule, ButtonModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);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 { Component } from '@angular/core';
@Component({
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 { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { AutoCompleteModule } from '@syncfusion/ej2-angular-dropdowns';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,FormsModule, ReactiveFormsModule, AutoCompleteModule, ButtonModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);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 { Component } from '@angular/core';
@Component({
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 { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { AutoCompleteModule } from '@syncfusion/ej2-angular-dropdowns';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,FormsModule, ReactiveFormsModule, AutoCompleteModule, ButtonModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);