Custom search in Angular Auto complete component
27 Apr 20243 minutes to read
The AutoComplete has built-in support to highlight the searched characters on suggested list items when enabled the highlight
property.
In the below sample, to customize the matched character in suggestion list by e-highlight
class.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { AutoCompleteModule } from '@syncfusion/ej2-angular-dropdowns'
import { Component } from '@angular/core';
@Component({
imports: [
FormsModule, AutoCompleteModule
],
standalone: true,
selector: 'app-root',
// specifies the template string for the AutoComplete component
template: `<ejs-autocomplete id='atcelement' [dataSource]='searchData' [fields]='fields' [placeholder]='text' [highlight]='highlight'></ejs-autocomplete>`
})
export class AppComponent {
constructor() {
}
// defined the array of data
public searchData: { [key: string]: Object }[] = [
{ Name: 'Australia', Code: 'AU' },
{ Name: 'Bermuda', Code: 'BM' },
{ Name: 'Canada', Code: 'CA' },
{ Name: 'Cameroon', Code: 'CM' },
{ Name: 'Denmark', Code: 'DK' },
{ Name: 'France', Code: 'FR' },
{ Name: 'Finland', Code: 'FI' },
{ Name: 'Germany', Code: 'DE' },
{ Name: 'Greenland', Code: 'GL' },
{ Name: 'Hong Kong', Code: 'HK' },
{ Name: 'India', Code: 'IN' },
{ Name: 'Italy', Code: 'IT' },
{ Name: 'Japan', Code: 'JP' },
{ Name: 'Mexico', Code: 'MX' },
{ Name: 'Norway', Code: 'NO' },
{ Name: 'Poland', Code: 'PL' },
{ Name: 'Switzerland', Code: 'CH' },
{ Name: 'United Kingdom', Code: 'GB' },
{ Name: 'United States', Code: 'US' }];
// maps the appropriate column to fields property
public fields: Object = { value: "Name" };
// set the placeholder to the AutoComplete input
public text: string = "Find a country";
//enable the highlight property to highlight the matched character in suggestion list
public highlight: Boolean = true;
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));