Autocomplete MDB Pro component


Basic example


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

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');
}
}
  

NgModel value MDB Pro component

Selected state:


<mdb-completer [label]="'Select color'" name="autocomplete" initialValue="'Select color'" [(ngModel)]="searchStr" [datasource]="dataService"
      [minSearchLength]="0">
</mdb-completer>
<p>Selected value: {{searchStr}}</p>
	

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

@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');
    }
}
  

Initial value MDB Pro component


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

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

@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' },
    ];

    // Initial value as ngModel
    protected searchStr: string = this.searchData[0].color;
    constructor(private completerService: CompleterService) {
        this.dataService = completerService.local(this.searchData, 'color', 'color');
    }
}
  

inputClass example MDB Pro component


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

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

@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');
}
}
  

Remote data MDB Pro component


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

import { Component } from '@angular/core';
import { Component } from '@angular/core';
import { CompleterService } from 'ng-mdb-pro/pro';
import { CompleterData } from 'ng-mdb-pro/pro/autocomplete';
import { Http } from '@angular/http';

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

    public dataRemote: CompleterData;
    constructor(private completerService: CompleterService, http: Http) {
        // 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');
    }
}
  

Events MDB Pro component


<mdb-completer [label]="'Select color'" name="autocomplete" (keyup)="onKeyUp()" (keydown)="onKeyDown()" (opened)="onOpen()" (highlighted)="onHighlight()" (selected)="onSelect()" (focusin)="onFocus()" (blur)="onBlur()" initialValue="'Select color'" [(ngModel)]="searchStr"
      [dataService]="dataRemote" [minSearchLength]="0">
</mdb-completer>
<p>is focused: {{focused}}, is blurred: {{blurred}}</p>
	

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

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

    public blurred = null;
    public focused = null;
    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');
    }

    onFocus() {
        this.focused = true;
        this.blurred = false;
    }
    onBlur() {
        this.focused = false;
        this.blurred = true;
    }
    onSelect() {
        console.log('Item was selected');
    }
    onHighlight() {
        console.log('Item was highlightened');
    }
    onKeyUp() {
        console.log('Key up event');
    }
    onKeyDown() {
        console.log('Key down event');
    }
    onOpen() {
        console.log('Dropdown was opened');
    }
}
  

Options:

Attribute Description Type Required Default
datasource Autocomplete list data source can be an array of strings or a URL that results in an array of strings or a CompleterData object Array <string>|string|CompleterData Yes
dataService Deprecated use datasource instead. Autocomplete list data source. CompleterData Yes
ngModel see the angular forms API. string Yes
autofocus Set input focus when the page loads boolean No false
clearUnselected Clear the input on blur if not selected. boolean No false
clearSelected Clear the input when a result is selected. boolean No false
disableInput If true disable the input field. boolean No false
initialValue Initial value for the component. Value is parsed using: titleField, descriptionField and imageField and used as selected value any No
inputClass class attribute of the input element. string No
matchClass CSS class to apply for matching part of the title and description. string No
maxChars Maximal number of characters that the user can type in the component. number No 524288
minSearchLength Minimal number of characters required for searching. number No 3

API Reference:

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'