angular-completer

Auto complete component for Angular.

This component is based on ng2-completer by Ofer Herman

Usage

The module you want to use ngx-completer in must import NgxCompleterModule and FormsModule (to use the ngModel directive on ngx-completer). NgxCompleterModule provides the CompleterService, and declares the ngx-completer directive.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from "@angular/forms";
import { AppComponent } from './app.component';
import { NgxCompleterModule } from "angular-completer";

@NgModule({
  imports: [
      BrowserModule,
      NgxCompleterModule,
      FormsModule,
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Add ngx-completer to your component and create a data source:

import { Component } from '@angular/core';
import { CompleterService, DataService } from 'angular-completer';

@Component({
  selector: 'my-component',
  template: `<h1>Search color</h1>
            <ngx-completer [(ngModel)]="searchStr" [datasource]="dataService" [minSearchLength]="0"></ngx-completer>
            <h1>Search captain</h1>
            <ngx-completer [(ngModel)]="captain" [datasource]="captains" [minSearchLength]="0"></ngx-completer>`
})
export class MyComponent {

  protected searchStr: string;
  protected captain: string;
  protected dataService: DataService;
  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');
  }
}

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

API

ngx-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 DataService object|Array<string>|string|DataService|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 |autoMatchBy|The property to autoMatch a result by.|string|No| |clearUnselected|Clear the input on blur if not 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 and descriptionField 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|| |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| |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...|

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.| |headers|Headers (@angular/http)|Deprecated use requestOptions instead. HTTP request headers that should be sent with the search request. |requestOptions|RequestOptions (@angular/http)|HTTP request options that should be sent with the search request.|

CSS classes

• .completer-dropdown
• .completer-row
• .completer-description
• .completer-selected-row

Credits

• This product uses the TMDb API but is not endorsed or certified by TMDb