Search on filtering in Angular Drop down list component
27 Apr 20243 minutes to read
The following example demonstrates about how to set limit the search result on filtering.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { Component } from '@angular/core';
import { Query, DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
import { FilteringEventArgs } from '@syncfusion/ej2-dropdowns';
import { EmitType } from '@syncfusion/ej2-base';
@Component({
imports: [
FormsModule, ReactiveFormsModule, DropDownListModule, ButtonModule
],
standalone: true,
selector: 'app-root',
// specifies the template string for the DropDownList component with change event
template: `<ejs-dropdownlist id='ddlelement' #samples [dataSource]='data' [query]='query' [fields]='fields' [placeholder]='text' [allowFiltering]='true' [sortOrder]='sorting' (filtering)='onFiltering($event)'></ejs-dropdownlist>`
})
export class AppComponent {
constructor() {
}
//bind the DataManager instance to dataSource property
public data: DataManager = new DataManager({
url: 'https://services.odata.org/V4/Northwind/Northwind.svc/',
adaptor: new ODataV4Adaptor,
crossDomain: true
});
public query: Query = new Query().from('Customers').select(['ContactName', 'CustomerID']).take(6);
// maps the appropriate column to fields property
public fields: Object = { text: 'ContactName', value: 'CustomerID' };
// set the placeholder to the DropDownList input
public text: string = "Select a customer";
//sort the result items
public sorting: string = 'Ascending';
//Bind the filter event
public onFiltering: EmitType<FilteringEventArgs> = (e: FilteringEventArgs) => {
// load overall data when search key empty.
if (e.text === '') {
e.updateData(this.data);
} else {
// set limit as 4 to search result
let query: Query = new Query().from('Customers').select(['ContactName', 'CustomerID']).take(4);
query = (e.text !== '') ? query.where('ContactName', 'startswith', e.text, true) : query;
e.updateData(this.data, query);
}
};
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));