Autofill in Angular Auto complete component
27 Apr 20243 minutes to read
The AutoComplete supports the autofill behavior with the help of autofill
property. Whenever you change the input value, the AutoComplete will autocomplete your data by matching the typed character. Suppose, if no matches found then, AutoComplete doesn’t suggest any item.
In the below sample, showcase that how to work autofill
with 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 AutoComplete component
template: `<ejs-autocomplete id='atcelement' [dataSource]='searchData' [fields]='fields' [placeholder]='text' [autofill]='autofill'></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 autofill: Boolean = true;
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));