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-autocompletecomponent was changed tomdb-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 ofmdb-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 } 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 {
searchText = new Subject<string>();
results: Observable<string[]>;
data: any = [
'red',
'green',
'blue',
'cyan',
'magenta',
'yellow',
'black',
];
constructor() {
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 } 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 {
searchText = new Subject<string>();
results: Observable<string[]>;
data: any = [
'red',
'green',
'blue',
'cyan',
'magenta',
'yellow',
'black',
];
constructor() {
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 } 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<string>();
url = 'https://swapi.py4e.com/api/people/?search=';
results: Observable<any>;
data: any = [];
constructor(private httpClient: HttpClient) {
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 {
results: Observable<string[]>;
data: any = ['red', 'green', 'blue', 'cyan', 'magenta', 'yellow', 'black'];
testForm: FormGroup;
constructor() {
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 } 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 {
searchText = new Subject<string>();
results: Observable<string[]>;
data: any = [
'red',
'green',
'blue',
'cyan',
'magenta',
'yellow',
'black',
];
constructor() {
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 } 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 {
searchText = new Subject<string>();
results: Observable<string[]>;
data: any = [
'red',
'green',
'blue',
'cyan',
'magenta',
'yellow',
'black',
];
constructor() {
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 {
myControl = new FormControl();
options: Color[] = [
{name: 'red'},
{name: 'green'},
{name: 'blue'}
];
data: Observable<Color[]>;
constructor() {
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);
}
}
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.
import { AutoCompleterModule, InputsModule } from 'ng-uikit-pro-standard';
import { FormsModule } from '@angular/forms';
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 |
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 } 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 {
searchText = new Subject<string>();
results: Observable<any>;
data: any[] = [
{ name: 'Anthony', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-1.webp' },
{ name: 'Jane', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-2.webp' },
{ name: 'John', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-8.webp' },
{ name: 'Samantha', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-4.webp' }
];
constructor() {
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 } 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 {
searchText = new Subject<string>();
searchText2 = new Subject<string>();
results: Observable<string[]>;
results2: Observable<string[]>;
data: string[] = ['Angular', 'React', 'Vue', 'jQuery'];
data2: string[] = [];
constructor() {
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 } 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 {
searchText = new Subject<string>();
results: Observable<any>;
url = 'https://swapi.py4e.com/api/people/?search=';
constructor(private http: HttpClient) {
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)
);
}
}