Edit these docs

Angular Bootstrap autocomplete

Angular Autocomplete - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

Angular Bootstrap autocomplete is a component that predicts the words based on the first few letters given by a user, while they are typing it.

Warning notification

In the MDB Angular 7.2.0 version, the mdb-autocomplete component was changed to mdb-auto-completer. Its construction is completely different. The following documentation presents the new version of this component. If you are still using the old version, its documentation can be found here. In MDB Angular 8 we will remove the old version of mdb-autocomplete, so we recommend that you migrate to the new version as soon as possible.

Basic example MDB Pro component 


        <div class="md-form">
          <input
            type="text"
            class="completer-input form-control mdb-autocomplete"
            [ngModel]="searchText | async"
            (ngModelChange)="searchText.next($event)"
            [mdbAutoCompleter]="auto"
            placeholder="Choose your color"
          />
          <mdb-auto-completer #auto="mdbAutoCompleter" textNoResults="I have found no results :(">
            <mdb-option *ngFor="let option of results | async" [value]="option">
              {{ option }}
            </mdb-option>
          </mdb-auto-completer>
        </div>
      

        import { Component, OnInit } from '@angular/core';
        import { Observable, Subject } from 'rxjs';
        import { startWith, map } from 'rxjs/operators';

        @Component({
          selector: 'basic-auto-completer',
          templateUrl: './basic-auto-completer.component.html',
          styleUrls: ['./basic-auto-completer.component.scss'],
        })
        export class BasicAutoCompleterComponent implements OnInit {
          searchText = new Subject();
          results: Observable<string[]>;
          data: any = [
            'red',
            'green',
            'blue',
            'cyan',
            'magenta',
            'yellow',
            'black',
          ];

          ngOnInit() {
            this.results = this.searchText.pipe(
              startWith(''),
              map((value: string) => this.filter(value))
            );
          }

          filter(value: string): string[] {
            const filterValue = value.toLowerCase();
            return this.data.filter((item: string) => item.toLowerCase().includes(filterValue));
          }
        }

Disabled autocomplete MDB Pro component

Use the disabled attribute on the input element, and [disabled]="true" on the mdb-auto-completer element to disable the whole autocompleter component.


        <div class="md-form">
          <input
            disabled
            type="text"
            class="completer-input form-control mdb-autocomplete"
            [ngModel]="searchText | async"
            (ngModelChange)="searchText.next($event)"
            [mdbAutoCompleter]="auto"
            placeholder="Choose your color"
          />
          <mdb-auto-completer [disabled]="true" #auto="mdbAutoCompleter" textNoResults="I have found no results :(">
            <mdb-option *ngFor="let option of results | async" [value]="option">
              {{ option }}
            </mdb-option>
          </mdb-auto-completer>
        </div>
      

        import { Component, OnInit } from '@angular/core';
        import { Observable, Subject } from 'rxjs';
        import { startWith, map } from 'rxjs/operators';

        @Component({
          selector: 'basic-auto-completer',
          templateUrl: './basic-auto-completer.component.html',
          styleUrls: ['./basic-auto-completer.component.scss'],
        })
        export class BasicAutoCompleterComponent implements OnInit {
          searchText = new Subject();
          results: Observable<string[]>;
          data: any = [
            'red',
            'green',
            'blue',
            'cyan',
            'magenta',
            'yellow',
            'black',
          ];

          ngOnInit() {
            this.results = this.searchText.pipe(
              startWith(''),
              map((value: string) => this.filter(value))
            );
          }

          filter(value: string): string[] {
            const filterValue = value.toLowerCase();
            return this.data.filter((item: string) => item.toLowerCase().includes(filterValue));
          }
        }

Remote data MDB Pro component 


        <div class="md-form">
          <input
            type="text"
            class="completer-input form-control mdb-autocomplete mb-0"
            [ngModel]="searchText | async"
            (ngModelChange)="searchText.next($event)"
            [mdbAutoCompleter]="auto"
            placeholder="Pick the Star Wars character"
          />
          <mdb-auto-completer #auto="mdbAutoCompleter" textNoResults="I have found no results :(">
            <mdb-option *ngFor="let option of results | async" [value]="option.name">
              <div class="d-flex flex-column">
                <strong>Name: {{ option.name }}</strong>
                <small>Gender: {{ option.gender }}</small>
                <small>Hair color: {{ option.hair_color }}</small>
              </div>
            </mdb-option>
          </mdb-auto-completer>
        </div>

      

        import { Component, OnInit } from '@angular/core';
        import { Observable, Subject } from 'rxjs';
        import { HttpClient } from '@angular/common/http';
        import { map } from 'rxjs/operators';

        @Component({
          selector: 'remote-auto-completer',
          templateUrl: './remote-auto-completer.component.html',
          styleUrls: ['./remote-auto-completer.component.scss'],
        })
        export class RemoteAutoCompleterComponent {
          searchText = new Subject();
          url = 'https://swapi.py4e.com/api/people/?search=';
          results: Observable<any>;
          data: any = [];

          constructor(private httpClient: HttpClient) { }

          ngOnInit() {
            this.httpClient.get(this.url).subscribe((data: any) => {
              console.log(data);
              this.data = data;

              this.results = this.searchText.pipe(
                startWith(''),
                map((value: string) => this.filter(value))
              );
            });
          }

          filter(value: string): string[] | undefined {
            const filterValue = value.toLowerCase();
            if (this.data && this.data['results']) {
              return this.data['results'].filter((item: any) =>
                item.name.toLowerCase().includes(filterValue)
              );
            }
          }
        }

Reactive forms MDB Pro component

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

Remember to import ReactiveFormsModule into your app.module.ts

Default value

Set default value in FormControl


        <form [formGroup]="testForm">
          <div class="md-form">
            <input
              formControlName="testAutocomplete"
              type="text"
              class="completer-input form-control mdb-autocomplete mb-0"
              [mdbAutoCompleter]="auto"
              placeholder="Choose your color"
            />
            <mdb-auto-completer #auto="mdbAutoCompleter" textNoResults="I have found no results :(">
              <mdb-option *ngFor="let option of results | async" [value]="option">
                {{ option }}
              </mdb-option>
            </mdb-auto-completer>
          </div>
        </form>
      

        import { OnInit, Component } from '@angular/core';
        import { FormControl, FormGroup } from '@angular/forms';
        import { Observable } from 'rxjs';
        import { startWith, map } from 'rxjs/operators';

        @Component({
          selector: 'reactive-form-auto-completer',
          templateUrl: './reactive-form-auto-completer.component.html',
          styleUrls: ['./reactive-form-auto-completer.component.scss'],
        })
        export class ReactiveFormAutoCompleterComponent implements OnInit {
          results: Observable<string[]>;
          data: any = ['red', 'green', 'blue', 'cyan', 'magenta', 'yellow', 'black'];

          testForm: FormGroup;

          constructor() { }

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

            this.results = this.testForm.controls.testAutocomplete.valueChanges
              .pipe(
                startWith('red'),
                map((value: string) => this.filter(value))
              );
          }

          filter(value: string): string[] {
            const filterValue = value.toLowerCase();
            return this.data.filter((item: any) => item.toLowerCase().includes(filterValue));
          }
        }

Append to body MDB Pro component

In this section, you will find information on how to append mdb-auto-completer component to the body element.


        <div class="md-form">
          <input
            type="text"
            class="completer-input form-control mdb-autocomplete"
            [ngModel]="searchText | async"
            (ngModelChange)="searchText.next($event)"
            [mdbAutoCompleter]="auto"
            placeholder="Choose your color"
          />
          <mdb-auto-completer [appendToBody]="true" #auto="mdbAutoCompleter" textNoResults="I have found no results :(">
            <mdb-option *ngFor="let option of results | async" [value]="option">
              {{ option }}
            </mdb-option>
          </mdb-auto-completer>
        </div>
      

        import { Component, OnInit } from '@angular/core';
        import { Observable, Subject } from 'rxjs';
        import { startWith, map } from 'rxjs/operators';

        @Component({
          selector: 'body-auto-completer',
          templateUrl: './body-auto-completer.component.html',
          styleUrls: ['./body-auto-completer.component.scss'],
        })
        export class BodyAutoCompleterComponent implements OnInit {
          searchText = new Subject();
          results: Observable<string[]>;
          data: any = [
            'red',
            'green',
            'blue',
            'cyan',
            'magenta',
            'yellow',
            'black',
          ];

          ngOnInit() {
            this.results = this.searchText.pipe(
              startWith(''),
              map((value: string) => this.filter(value))
            );
          }

          filter(value: string): string[] {
            const filterValue = value.toLowerCase();
            return this.data.filter((item: string) => item.toLowerCase().includes(filterValue));
          }
        }

Visible Options MDB Pro component

In this section, you will find information on how to set visibleOptions and optionHeight options to the autocomplete component.


          <div class="md-form">
              <input
                type="text"
                class="completer-input form-control mdb-autocomplete"
                [ngModel]="searchText | async"
                (ngModelChange)="searchText.next($event)"
                [mdbAutoCompleter]="auto"
                placeholder="Choose your color"
              />
              <mdb-auto-completer
              [visibleOptions]="5"
              [optionHeight]="40"
              #auto="mdbAutoCompleter" textNoResults="I have found no results :(">
                <mdb-option *ngFor="let option of results | async" [value]="option">
                  {{ option }}
                </mdb-option>
              </mdb-auto-completer>
            </div>
      

        import { Component, OnInit } from '@angular/core';
        import { Observable, Subject } from 'rxjs';
        import { startWith, map } from 'rxjs/operators';

        @Component({
          selector: 'body-auto-completer',
          templateUrl: './body-auto-completer.component.html',
          styleUrls: ['./body-auto-completer.component.scss'],
        })
        export class BodyAutoCompleterComponent implements OnInit {
          searchText = new Subject();
          results: Observable<string[]>;
          data: any = [
            'red',
            'green',
            'blue',
            'cyan',
            'magenta',
            'yellow',
            'black',
          ];

          ngOnInit() {
            this.results = this.searchText.pipe(
              startWith(''),
              map((value: string) => this.filter(value))
            );
          }

          filter(value: string): string[] {
            const filterValue = value.toLowerCase();
            return this.data.filter((item: string) => item.toLowerCase().includes(filterValue));
          }
        }

Display Value MDB Pro component

In this section, you will find information on how to set different option's control value than the option's display value (what is displayed in the text field).


          <div class="md-form">
              <input
                type="text"
                class="completer-input form-control mdb-autocomplete"
                [formControl]="myControl"
                [mdbAutoCompleter]="auto"
                placeholder="Choose your color"
              />
              <mdb-auto-completer
              [displayValue]="onDisplayValue"
              #auto="mdbAutoCompleter" textNoResults="I have found no results :(">
                <mdb-option *ngFor="let option of data | async" [value]="option">
                  {{ option.name }}
                </mdb-option>
              </mdb-auto-completer>
            </div>
      

        import { Component,  OnInit} from '@angular/core';
        import { Observable } from 'rxjs';
        import { startWith, map } from 'rxjs/operators';
        import { FormControl } from '@angular/forms';

        export interface Color {
            name: string;
          }
        @Component({
          selector: 'body-auto-completer',
          templateUrl: './body-auto-completer.component.html',
          styleUrls: ['./body-auto-completer.component.scss'],
        })
        export class BodyAutoCompleterComponent implements OnInit {
          myControl = new FormControl();

          options: Color[] = [
            {name: 'red'},
            {name: 'green'},
            {name: 'blue'}
          ];
          data: Observable<Color[]>;

          ngOnInit() {
            this.data = this.myControl.valueChanges
            .pipe(
              startWith(''),
              map(value => typeof value === 'string' ? value : value.name),
              map(name => name ? this.filter(name) : this.options.slice())
            );
          }
          onDisplayValue(color: Color): string | undefined {
            console.log(color)
            return color ? color.name : undefined;
          }

          filter(name: string): Color[] {
            const filterValue = name.toLowerCase();

            return this.options.filter(option => option.name.toLowerCase().indexOf(filterValue) === 0);
          }
        }
Edit these docs

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 { AutoCompleterModule, InputsModule } from 'ng-uikit-pro-standard'
// MDB Angular Pro
import { FormsModule } from '@angular/forms'
Import example Modules list

Components

MdbAutoCompleterComponent

Selector: mdb-auto-completer

Type: MdbAutoCompleterComponent

MdbOptionComponent

Selector: mdb-option

Type: MdbOptionComponent

Directives

MdbAutoCompleterDirective

Selector: mdbAutoCompleter

Type: MdbAutoCompleterDirective

Export as: mdbAutoCompleterTrigger

Inputs

MdbAutoCompleterComponent
Name Type Default Description Example
textNoResults string - Changes no results text textNoResults="Custom text"
clearButton boolean true Shows the clear button [clearButton]="true"
clearButtonTabIndex number 0 Set the clear button tab index [clearButtonTabIndex]="1"
disabled boolean false Disable the mdb-auto-completer component [disabled]="true"
appendToBody boolean false If true, will append the mdb-auto-completer dropdown element to the body element. Helpful when mdb-auto-completer parent has a overflow: hidden [appendToBody]="true"
visibleOptions number 4 Changes visible options in autocomplete dropdown [visibleOptions]="5"
optionHeight number 45 Changes height of each option (in pixels) [optionHeight]="40"
displayValue function - Set display value to different than control value. [displayValue]="onDisplayValue"
MdbOptionComponent
Name Type Default Description Example
value string - Option component value [value]="value"
MdbAutoCompleterDirective
Name Type Default Description Example
mdbAutoCompleter MdbAutoCompleterComponent - Auto Completer component binding [mdbAutoCompleter]="autocomplete"

Outputs

MdbAutoCompleterComponent
Name Type Description Example
select EventEmitter<any> Event emitted when item is selected (highlighted) (select)="onItemSelect($event)"
selected EventEmitter<any> Event emitted when new item is selected (picked from the list) (selected)="onItemSelect($event)"
MdbAutoCompleterDirective
Name Type Description Example
clearBtnClicked EventEmitter<any> Event emitted when clear button is clicked (clearBtnClicked)="onClearButtonClick()"

Methods

You can get access to public methods of the directives from another component

@ViewChild(MdbAutoCompleterDirective, { static: true }) mdbAutoCompleter: MdbAutoCompleterDirective;

MdbAutoCompleterDirective
Name Description
clear() Clears the input value
Edit these docs

Angular Autocomplete - examples & customization

Autocomplete with icons MDB Pro component 


        <div class="md-form">
          <input
            type="text"
            [ngModel]="searchText | async"
            (ngModelChange)="searchText.next($event)"
            class="completer-input form-control mdb-autocomplete mb-0"
            [mdbAutoCompleter]="auto"
            placeholder="Choose your color"
          />
          <mdb-auto-completer #auto="mdbAutoCompleter" textNoResults="I have found no results :(">
            <mdb-option *ngFor="let option of results | async" [value]="option.name">
              <div class="d-flex justify-content-between align-items-center w-100">
                <span>{{ option.name }}</span>
                <img [src]="option.icon" alt="{{ option.name }} photo" class="completer-image" />
              </div>
            </mdb-option>
          </mdb-auto-completer>
        </div>
      

        import { Component, OnInit } from '@angular/core';
        import { Observable, Subject } from 'rxjs';
        import { startWith, map } from 'rxjs/operators';

        @Component({
          selector: 'auto-completer-with-icons',
          templateUrl: './auto-completer-with-icon.component.html',
          styleUrls: ['./auto-completer-with-icon.component.scss'],
        })
        export class AutoCompleterWithIconsComponent implements OnInit {
          searchText = new Subject();
          results: Observable<any>;
          data: any[] = [
            { name: 'Anthony', icon: 'https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-1.webp' },
            { name: 'Jane', icon: 'https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-2.webp' },
            { name: 'John', icon: 'https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-8.webp' },
            { name: 'Samantha', icon: 'https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-4.webp' }
          ];

          constructor() { }

          ngOnInit() {
            this.results = this.searchText
              .pipe(
                startWith(''),
                map((value: string) => this.filter(value))
              );
          }

          filter(value: string): string[] {
            const filterValue = value.toLowerCase();
            return this.data.filter((item: any) => item.name.toLowerCase().includes(filterValue));
          }
        }

Second dependent on the first MDB Pro component

The selection of values in the first auto-completer determines the options to choose in the second auto-completer.


        <div class="row">
          <div class="col-md-4 mx-auto-my-5">
            <div class="md-form">
              <input
                type="text"
                [ngModel]="searchText | async"
                (ngModelChange)="searchText.next($event)"
                class="completer-input form-control mdb-autocomplete mb-0"
                [mdbAutoCompleter]="auto"
                placeholder="Choose your color"
              />
              <mdb-auto-completer #auto="mdbAutoCompleter" textNoResults="I have found no results :(">
                <mdb-option *ngFor="let option of results | async" [value]="option">
                  <div class="d-flex flex-column">
                    {{ option }}
                  </div>
                </mdb-option>
              </mdb-auto-completer>
            </div>
          </div>

          <div class="col-md-4 mx-auto-my-5">
            <div class="md-form">
              <input
                type="text"
                [ngModel]="searchText2 | async"
                (ngModelChange)="searchText2.next($event)"
                class="completer-input form-control mdb-autocomplete mb-0"
                [mdbAutoCompleter]="auto2"
                placeholder="Choose your color"
              />
              <mdb-auto-completer #auto2="mdbAutoCompleter" textNoResults="I have found no results :(">
                <mdb-option *ngFor="let option of results2 | async" [value]="option">
                  <div class="d-flex flex-column">
                    {{ option }}
                  </div>
                </mdb-option>
              </mdb-auto-completer>
            </div>
          </div>
        </div>
      

        import { Component, OnInit } from '@angular/core';
        import { Observable, Subject } from 'rxjs';
        import { startWith, map, tap } from 'rxjs/operators';

        @Component({
          selector: 'multiple-autocompleter',
          templateUrl: './multiple-autocompleter.component.html',
          styleUrls: ['./multiple-autocompleter.component.scss'],
        })
        export class MultipleAutoCompleterComponent implements AfterViewInit {
          searchText = new Subject();
          searchText2 = new Subject();
          results: Observable<string[]>;
          results2: Observable<string[]>;
          data: string[] = ['Angular', 'React', 'Vue', 'jQuery'];
          data2: string[] = [];

          constructor() { }

          ngOnInit() {
            this.results = this.searchText
              .pipe(
                startWith(''),
                tap((searchText: string) => this.updateSecondCompleterData(searchText)),
                map((value: string) => this.filter(value, this.data))
              );

            this.results2 = this.searchText2
              .pipe(
                startWith(''),
                map((value: string) => this.filter(value, this.data2))
              );
          }

          updateSecondCompleterData(searchText: string) {
            if (searchText === 'Angular') {
              this.data2 = ['Angular 1', 'Angular 2', 'Angular 3', 'Angular 4'];
            } else if (searchText === 'React') {
              this.data2 = ['React 1', 'React 2', 'React 3', 'React 4'];
            } else if (searchText === 'Vue') {
              this.data2 = ['Vue 1', 'Vue 2', 'Vue 3', 'Vue 4'];
            } else if (searchText === 'jQuery') {
              this.data2 = ['jQuery 1', 'jQuery 2', 'jQuery 3', 'jQuery 4'];
            }
          }

          filter(value: string, data: string[]): string[] {
            const filterValue = value.toLowerCase();
            return data.filter((item: string) => item.toLowerCase().includes(filterValue));
          }

Remote call after input event MDB Pro component

The selection of values in the first auto-completer determines the options to choose in the second auto-completer.


        <div class="md-form">
          <input
            type="text"
            [ngModel]="searchText | async"
            (ngModelChange)="searchText.next($event)"
            class="completer-input form-control mdb-autocomplete mb-0"
            [mdbAutoCompleter]="auto"
            placeholder="Choose your color"
          />
          <mdb-auto-completer #auto="mdbAutoCompleter" textNoResults="I have found no results :(">
            <mdb-option *ngFor="let option of results | async" [value]="option.name">
              <div class="d-flex flex-column">
                <strong>Name: {{ option.name }}</strong>
                <small>Gender: {{ option.gender }}</small>
                <small>Hair color: {{ option.hair_color }}</small>
              </div>
            </mdb-option>
          </mdb-auto-completer>
        </div>
      

        import { Component, OnInit } from '@angular/core';
        import { Observable, Subject } from 'rxjs';
        import { startWith, map, debounceTime, switchMap } from 'rxjs/operators';
        import { HttpClient } from '@angular/common/http';

        @Component({
          selector: 'remote-event',
          templateUrl: './remote-event.component.html',
          styleUrls: ['./remote-event.component.scss']
        })
        export class RemoteEventComponent implements OnInit {
          searchText = new Subject();
          results: Observable<any>;
          url = 'https://swapi.py4e.com/api/people/?search=';

          constructor(private http: HttpClient) { }

          ngOnInit() {
            this.results = this.searchText
              .pipe(
                startWith(this.searchText),
                switchMap((searchText: string) => this.getRemoteData(searchText))
              );
          }

          getRemoteData(searchText: string) {
            return this.http.get(this.url + searchText)
              .pipe(
                debounceTime(250),
                map((items: any) => items.results)
              );
          }
        }