Search results

Autofill supported with ComboBox in Angular ComboBox component

30 Sep 2022 / 1 minute to read

The ComboBox supports the autofill behaviour with the help of autofill property. Whenever you change the input value, the ComboBox will autocomplete your data by matching the typed character. Suppose, if no matches found then, comboBox doesn’t suggest any item.

The following examples, showcase that how to work autofill with ComboBox.

Copied to clipboard
import { Component } from '@angular/core';

    selector: 'app-root',
    // specifies the template string for enable the autofill in ComboBox component
    template: `<ejs-combobox id='comboelement' #samples [dataSource]='data' [autofill]='true' [placeholder]='text'></ejs-combobox>`
export class AppComponent {
    constructor() {
    // defined the array of data
    public data: string[] = ['Badminton', 'Basketball', 'Cricket', 'Golf', 'Hockey', 'Rugby'];
    // set placeholder text to ComboBox input element
    public text: string = 'Select a game';
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ComboBoxModule } from '@syncfusion/ej2-angular-dropdowns';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
 * Module
    imports: [
        BrowserModule,FormsModule, ReactiveFormsModule, ComboBoxModule,ButtonModule
    declarations: [AppComponent],
    bootstrap: [AppComponent]
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';