Angular Bootstrap autocomplete

Angular Autocomplete - Bootstrap 4 & Material Design

Angular Bootstrap autocomplete is a component which predicts the words basing on the first few letters given by a user, while one is typing it.

Basic example MDB Pro component 


        <mdb-autocomplete [label]="'Select color'" name="autocomplete" [(ngModel)]="searchStr" [datasource]="dataService"
          [minSearchLength]="0">
        </mdb-autocomplete>
      

        import { Component } from '@angular/core';
        import { CompleterService, CompleterData } from 'ng-uikit-pro-standard';

        @Component({
        selector: 'autocomplete-example',
        templateUrl: 'autocomplete.html',
        })
        export class AutocompleteComponent {

        protected searchStr: string;
        protected dataService: CompleterData;
        protected searchData = [
          { color: 'red' },
          { color: 'green' },
          { color: 'blue' },
          { color: 'cyan' },
          { color: 'magenta' },
          { color: 'yellow' },
          { color: 'black' },
        ];

        constructor(private completerService: CompleterService) {
          this.dataService = completerService.local(this.searchData, 'color', 'color');
        }
        }

Disabled autocomplete MDB Pro component

Use [disableInput]="true" input to disable autocomplete input field.


        <mdb-autocomplete [disableInput]="true" [label]="'Select color'" name="autocomplete" [(ngModel)]="searchStr"
          [datasource]="dataService" [minSearchLength]="0">
        </mdb-autocomplete>
      

        import { Component } from '@angular/core';

        @Component({
        selector: 'disabled-autocomplete',
        templateUrl: 'disabled-autocomplete.html',
        })

        export class DisabledAutocompleteComponent {

        protected searchStr: string;
        protected dataService: CompleterData;
        protected searchData = [
          { color: 'red' },
          { color: 'green' },
          { color: 'blue' },
          { color: 'cyan' },
          { color: 'magenta' },
          { color: 'yellow' },
          { color: 'black' },
        ];

        constructor(private completerService: CompleterService) {
          this.dataService = completerService.local(this.searchData, 'color', 'color');
        }

Remote data MDB Pro component 


        <mdb-autocomplete [label]="'Select color'" name="autocomplete" [(ngModel)]="searchStr" [dataService]="dataRemote"
          [minSearchLength]="0">
        </mdb-autocomplete>
      

        import { Component } from '@angular/core';
        import { CompleterService, CompleterData } from 'ng-uikit-pro-standard';

        @Component({
        selector: 'completer-remote',
        templateUrl: './completer-remote.component.html',
        styleUrls: ['./completer-remote.component.scss']
        })
        export class CompleterRemoteComponent {

        public dataRemote: CompleterData;
        constructor(private completerService: CompleterService) {
          // tslint:disable-next-line:max-line-length
          this.dataRemote =
          completerService.remote('https://raw.githubusercontent.com/oferh/ng2-completer/master/demo/res/data/countries.json?',
          'name', 'name');
        }
        }

Template-driven forms MDB Pro component

In this section you will find informations on how to use our autocomplete component in template-driven forms.

Remember to import FormsModule in your's app.module.ts

Default value

Bind in two-way ngModel from component.html with searchStr in component.ts file


        <mdb-autocomplete [label]="'Select color'" name="autocomplete" [(ngModel)]="searchStr" [datasource]="dataService"
          [minSearchLength]="0">
        </mdb-autocomplete>
      

        import { Component, OnInit } from '@angular/core';
        import { CompleterService, CompleterData } from 'ng-uikit-pro-standard';

        @Component({
        selector: 'defaultvalue-autocomplete',
        templateUrl: 'defaultvalue-autocomplete.html',
        })

        export class DefaultValueAutocompleteComponent implements OnInit {

        protected searchStr = 'red';
        protected dataService: CompleterData;
        protected searchData = [
          { color: 'red' },
          { color: 'green' },
          { color: 'blue' },
          { color: 'cyan' },
          { color: 'magenta' },
          { color: 'yellow' },
          { color: 'black' },
        ];

        constructor(private completerService: CompleterService) {
          this.dataService = completerService.local(this.searchData, 'color', 'color');
        }

        ngOnInit() {
          this.searchStr = 'red';
        }

Reactive forms MDB Pro component

In this section you will find informations on how to use our autocomplete component in reactive forms.

Remember to import ReactiveFormsModule in your's app.module.ts

Default value

Set default value in FormControl


        <form [formGroup]="testForm">
          <mdb-autocomplete [label]="'Select color'" name="autocomplete" formControlName="testAutocomplete"
            [datasource]="dataService" [minSearchLength]="0">
          </mdb-autocomplete>
        </form>
      

        import { Component, OnInit } from '@angular/core';
        import { FormGroup, FormControl } from '@angular/forms';
        import { CompleterService, CompleterData } from 'ng-uikit-pro-standard';

        @Component({
        selector: 'defaultvalue-autocomplete',
        templateUrl: 'defaultvalue-autocomplete.html',
        })

        export class DefaultValueAutocompleteComponent implements OnInit {

        testForm: FormGroup;
        protected dataService: CompleterData;
        protected searchData = [
          { color: 'red' },
          { color: 'green' },
          { color: 'blue' },
          { color: 'cyan' },
          { color: 'magenta' },
          { color: 'yellow' },
          { color: 'black' },
        ];

        constructor(private completerService: CompleterService) {
          this.dataService = completerService.local(this.searchData, 'color', 'color');
        }

        ngOnInit() {
          this.testForm = new FormGroup({
          testAutocomplete: new FormControl('red')
          });
        }

Angular Autocomplete - API

In this section you will find informations about required modules and available inputs, outputs, methods and events of autocomplete component.

Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.

API Reference for MDB Angular Autocomplete:
// MDB Angular Pro
import { AutocompleteModule, WavesModule, InputsModule } from 'ng-uikit-pro-standard'
Import example Modules list

Components

MdbAutocomplete

Selector: mdb-autocomplete

Type: CompleterComponent

Inputs

Name Type Default Description Example
autoFocus boolean false Set focus on autocomplete input when page loads [autoFocus]="true"
clearButtonTabindex number 1 Changes tabindex of clear button [clearButtonTabindex]="-1"
clearSelected boolean false Clears the input when a result is selected [clearSelected]="true"
clearUnselected boolean false Clears the input on blur if not selected [clearUnselected]="true"
datasource string | Array | CompleterData - Autocomplete list data source can be an array of strings or a URL that results in an array of strings or a CompleterData object this.dataService = completerService.local(this.searchData, 'color', 'color');
disableInput boolean false Disables autocomplete input field [disableInput]="true"
inputClass string - Custom class for autocomplete input [inputsClass]="'red-text'"
matchClass string - Custom class to apply for matching part of the title and description [matchClass]="'red-text'"
maxChars number 524288 Maximal number of characters that the user can type in the component [maxChars]="50"
minSearchLength number 3 Minimal number of characters required for searching [minSearchLength]="0"

Outputs

Name Type Description Example
blur EventEmitter<any> Event fired on autocomplete input blur (blur)="onBlur($event)"
focusEvent EventEmitter<any> Event fired on autocomplete input focus (focusEvent)="onFocusEvent($event)"
keydown EventEmitter<any> Event fired when key is pressed down in searchbox (keydown)="onKeydown($event)"
keyup EventEmitter<any> Event fired when key is pressed up in searchbox (keyup)="onKeyup($event)"
opened EventEmitter<boolean> Event fired when the autocomplete dropdown is opened (opened)="onOpened($event)"
Example:

        <mdb-autocomplete [label]="'Select color'" (selected)="onSelected($event)" (highlighted)="onHighlighted($event)"
          (blur)="onBlur($event)" (focusEvent)="onFocusEvent($event)" (opened)="onOpened($event)" (keyup)="onKeyup($event)"
          (keydown)="onKeydown($event)" initialValue="Select color" name="autocomplete" [(ngModel)]="searchStr"
          [datasource]="dataService" [minSearchLength]="0">
        </mdb-autocomplete>
      

        import { CompleterService } from 'ng-uikit-pro-standard';
        import { CompleterData } from 'ng-uikit-pro-standard';
        import { Component, AfterViewInit } from '@angular/core';

        @Component({
        selector: 'completer-events',
        templateUrl: './completer-events.component.html',
        styleUrls: ['./completer-events.component.scss'],
        })
        export class CompleterEventsComponent implements AfterViewInit {

        protected searchStr: string;
        protected dataService: CompleterData;
        protected searchData = [
          { color: 'red' },
          { color: 'green' },
          { color: 'blue' },
          { color: 'cyan' },
          { color: 'magenta' },
          { color: 'yellow' },
          { color: 'black' },
        ];

        constructor(private completerService: CompleterService) {
          this.dataService = completerService.local(this.searchData, 'color', 'color');
        }

        onSelected(event: any) {
          console.log(event);
        }

        onHighlighted(event: any) {
          console.log(event);
        }

        onBlur(event: any) {
          console.log(event);
        }

        onFocusEvent(event: any) {
          console.log(event);
        }

        onOpened(event: any) {
          console.log(event);
        }

        onKeyup(event: any) {
          console.log(event);
        }

        onKeydown(event: any) {
          console.log(event);
        }
        }

Angular Multiselect - examples & customization

Change input text color MDB Pro component 


        <mdb-autocomplete [label]="'Select color'" name="autocomplete" [inputClass]="'red-text'" initialValue="'Select color'"
          [(ngModel)]="searchStr" [datasource]="dataService" [minSearchLength]="0">
        </mdb-autocomplete>
      

        import { Component } from '@angular/core';
        import { Component} from '@angular/core';
        import { CompleterService, CompleterData } from 'ng-uikit-pro-standard';

        @Component({
        selector: 'autocomplete-model',
        templateUrl: './autocomplete-model.component.html',
        styleUrls: ['./autocomplete-model.component.scss']
        })
        export class AutocompleteModelComponent {

        protected dataService: CompleterData;
        protected searchData = [
          { color: 'red' },
          { color: 'green' },
          { color: 'blue' },
          { color: 'cyan' },
          { color: 'magenta' },
          { color: 'yellow' },
          { color: 'black' },
        ];

        constructor(private completerService: CompleterService) {
          this.dataService = completerService.local(this.searchData, 'color', 'color');
        }
        }

Autocomplete with icons MDB Pro component 


        <mdb-autocomplete [label]="'Select color'" initialValue="Select color" name="autocomplete" [(ngModel)]="searchStr"
          [datasource]="dataService" [minSearchLength]="0">
        </mdb-autocomplete>
      

        import { Component } from '@angular/core';
        import { CompleterData, CompleterService } from 'ng-uikit-pro-standard';

        @Component({
        selector: 'autocomplete-icons',
        templateUrl: './autocomplete-icons.component.html',
        styleUrls: ['./autocomplete-icons.component.scss'],
        })
        export class AutocompleteIconsComponent {
        protected searchStr: string;
        protected dataService: CompleterData;
        protected searchData = [
          { name: 'Anthony', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-1.jpg' },
          { name: 'Jane', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-2.jpg' },
          { name: 'John', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-8.jpg' },
          { name: 'Samantha', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-4.jpg' }
        ];

        constructor(private completerService: CompleterService) {
          this.dataService = completerService.local(this.searchData, 'name', 'name').imageField('icon');
        }

        }

No results custom message MDB Pro component

Use textNoResults input to set your custom message, which will be displayed if the component doesn't return any value.


        <mdb-autocomplete [label]="'Select color'" textNoResults="Your custom message" name="autocomplete" initialValue="'Select color'"
          [(ngModel)]="searchStr" [datasource]="dataService" [minSearchLength]="0">
        </mdb-autocomplete>

      

        import { Component } from '@angular/core';
        import { CompleterData } from 'path-to-completerData';
        import { CompleterService } from 'path-to-completerService';

        @Component({
        selector: 'autocomplete-example',
        templateUrl: 'autocomplete.html',
        })
        export class AutocompleteComponent {

        protected searchStr: string;
        protected dataService: CompleterData;
        protected searchData = [
          { color: 'red' },
          { color: 'green' },
          { color: 'blue' },
          { color: 'cyan' },
          { color: 'magenta' },
          { color: 'yellow' },
          { color: 'black' },
        ];

        constructor(private completerService: CompleterService) {
          this.dataService = completerService.local(this.searchData, 'color', 'color');
        }
        }

Custom searching text MDB Pro component

Use [textSearching] input to set custom text displayed when component searches for the given values.


        <mdb-autocomplete [label]="'Select color'" [textSearching]="'Your custom searching text'" name="autocomplete"
          initialValue="'Select color'" [(ngModel)]="searchStr" [datasource]="dataService" [minSearchLength]="0">
        </mdb-autocomplete>

      

        import { Component } from '@angular/core';
        import { CompleterData } from 'path-to-completerData';
        import { CompleterService } from 'path-to-completerService';

        @Component({
        selector: 'autocomplete-example',
        templateUrl: 'autocomplete.html',
        })
        export class AutocompleteComponent {

        protected searchStr: string;
        protected dataService: CompleterData;
        protected searchData = [
          { color: 'red' },
          { color: 'green' },
          { color: 'blue' },
          { color: 'cyan' },
          { color: 'magenta' },
          { color: 'yellow' },
          { color: 'black' },
        ];

        constructor(private completerService: CompleterService) {
          this.dataService = completerService.local(this.searchData, 'color', 'color');
        }
        }