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
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:
Selected value: {{searchStr}}
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
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
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
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.
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. |
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'