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

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-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-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-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-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