Angular 2 autocomplete component
This is simple Auto complete component for Angular 2. If you want to add auto-suggest / autocomplete feature on your angular app input box then you can use this free Angular 2 autocomplete component. This module help to add auto-complete while user entering country name it suggest matched country name in drop-down.
Installation
npm install ng2-completer --save
Usage
The module you want to use ng2-completer in must import Ng2CompleterModule
and FormsModule
(to use the ngModel
directive on ng2-completer). Ng2CompleterModule
provides the CompleterService
, and declares the ng2-completer
directive.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from "@angular/forms";
import { HttpClientModule } from "@angular/common/http";
import { AppComponent } from './app.component';
import { Ng2CompleterModule } from "ng2-completer";
@NgModule({
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
Ng2CompleterModule,
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Add ng2-completer to your component and create a data source:
import { Component } from '@angular/core';
import { CompleterService, CompleterData } from 'ng2-completer';
@Component({
selector: 'my-component',
template: `<h1>Search color</h1>
<ng2-completer [(ngModel)]="searchStr" [datasource]="dataService" [minSearchLength]="0"></ng2-completer>
<h1>Search captain</h1>
<ng2-completer [(ngModel)]="captain" [datasource]="captains" [minSearchLength]="0"></ng2-completer>`
})
export class MyComponent {
protected searchStr: string;
protected captain: string;
protected dataService: CompleterData;
protected searchData = [
{ color: 'red', value: '#f00' },
{ color: 'green', value: '#0f0' },
{ color: 'blue', value: '#00f' },
{ color: 'cyan', value: '#0ff' },
{ color: 'magenta', value: '#f0f' },
{ color: 'yellow', value: '#ff0' },
{ color: 'black', value: '#000' }
];
protected captains = ['James T. Kirk', 'Benjamin Sisko', 'Jean-Luc Picard', 'Spock', 'Jonathan Archer', 'Hikaru Sulu', 'Christopher Pike', 'Rachel Garrett' ];
constructor(private completerService: CompleterService) {
this.dataService = completerService.local(this.searchData, 'color', 'color');
}
}
ng2-completer uses rxjs stream as data sources.
There are 2 ready made data sources that can be used to fetch local and remote data but it’s also possible to provide
a custom source that generates a stream of items.
System.js configuration
Add the following to System.js
map configuration:
var map = {
...
'ng2-completer': 'node_modules/ng2-completer/ng2-completer.umd.js'
}
API
ng2-completer component
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 | |
autoMatch | Auto select an item if it is the only result and it is an exact match of the search text. | boolean | No | false |
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 |
fieldTabindex | Set the tabIndex of the input. | number | No | |
initialValue | Initial value for the component. Value is parsed using: titleField, descriptionField and imageField and used as selected value | any | No | |
inputId | id attribute of the input element. | string | No | |
inputName | name attribute of the input element. | string | 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 |
overrideSuggested | If true will override suggested and set the model with the value in the input field. | boolean | No | false |
openOnFocus | If true will open the dropdown and perform search when the input gets the focus. | boolean | No | false |
openOnClick | If true will open and close the dropdown by click. | boolean | No | false |
selectOnFocus | If true will select the input text upon focus. | boolean | No | false |
selectOnClick | If true will select the input text by click. | boolean | No | false |
fillHighlighted | If true will set the model with the value in the input field when item is highlighted. | boolean | No | true |
pause | Number of msec. to wait before searching. | number | No | 250 |
placeholder | Placeholder text for the search field. | string | No | |
textNoResults | Text displayed when the search returned no results. if the string is falsy it won’t be displayed | string | No | |
textSearching | Text displayed while search is active. if the string is falsy it won’t be displayed | string | No | Searching… |
autoHighlight | Automatically highlight the best matching search result when the input changes. the “best match” is selected by: exact match, starts with and finally includes | boolean | No | false |
ng2-completer events
Name | Description | Type |
---|---|---|
selected | emitted when an item is selected. | (selected: CompleterItem): void |
highlighted | emitted when an item is highlighted. | (highlighted: CompleterItem): void |
focus | emitted when the input gets focus | (): void |
blur | emitted when the input looses focus | (): void |
opened | emitted when the dropdown is opened or closed | (isOpen: boolean): void |
keyup | emitted when the input emits keyup | (event: any): void |
keydown | emitted when the input emits keydown | (event: any): void |
ng2-completer methods
Method | Description | Parameters |
---|---|---|
open() | Open the dropdown | |
close() | Close the dropdown | |
focus() | Set the focus to the completer input | |
blur() | Remove the focus from the completer input | |
isOpen() | Returns the state of the dropdown |
Local data
Create local data provider by calling CompleterService.local
.
Parameters
Name | Type | Description | Required |
---|---|---|---|
data | any[] | Observable<any[]> | A JSON array with the data to use or an Observable that emits one | Yes |
searchFields | string | Comma separated list of fields to search on. Fields may contain dots for nested attributes; if empty or null all data will be returned. | Yes |
titleField | string | Name of the field to use as title for the list item. | Yes |
Attributes
Name | Type | Description |
---|---|---|
descriptionField | string | Name of the field to use as description for the list item. |
imageField | string | Name of the field to use as image url for the list item. |
Remote data
Create remote data provider by calling CompleterService.remote
.
Parameters
Name | Type | Description | Required |
---|---|---|---|
url | string | Base url for the search | Yes |
searchFields | string | Comma separated list of fields to search on. Fields may contain dots for nested attributes; if empty or null all data will be returned. | Yes |
titleField | string | Name of the field to use as title for the list item. | Yes |
Attributes
Name | Type | Description |
---|---|---|
descriptionField | string | Name of the field to use as description for the list item. |
imageField | string | Name of the field to use as image url for the list item. |
urlFormater | (term: string) => string | Function that get’s the searchterm and returns the search url before each search. |
dataField | string | The field in the response that includes the data. |
requestOptions | RequestOptions (@angular/common/http) | HTTP request options that should be sent with the search request. |
CSS classes
.completer-holder
.completer-input
.completer-dropdown-holder
.completer-dropdown
.completer-searching
.completer-no-results
.completer-row
.completer-image-holder
.completer-image
.completer-image-default
.completer-title
.completer-description
.completer-list-item-holder
.completer-list-item
.completer-selected-row
See live demo and download source code.
Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.
This awesome script developed by oferh. Visit their official repository for more information and follow for future updates.