Autocomplete MDB Pro component

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-autocomplete [label]="'Select color'" initialValue="Select color" name="autocomplete" [(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');
  }
}
  

NgModel value MDB Pro component

Selected state:


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

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

No results custom message

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

Events

Here you can find events which are fired by Material Select


Name Usage Description
selected (opened)="onSelected($event)" The event is fired when the option is selected.
highlighted (highlighted)="onHighlighted($event)" The event is fired when the item is highlighted.
blur (blur)="onBlur($event)" The event is fired when the blurring the input.
focusEvent (focusEvent)="onFocusEvent($event)" The event is fired when the input is focused.
opened (opened)="onOpened($event)" The event is fired when the dropdown in Autocomplete is opened.
keydown (keydown)="onKeydown($event)" The event is fired when key is pressed down in searchbox.
keyup (keyup)="onKeyup($event)" The event is fired when key is pressed up in searchbox.

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

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'