ng-remote-autocomplete

The package is a remote autocomplete.

Installation

The package requires Angular 5+ to run.

$ npm i ng-remote-autocomplete

Usage

In order to use the remote autocomplete you need to:

• add RemoteAutocompleteModule And FormsModule to the Module you want to use in.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from "@angular/forms";
import { AppComponent } from './app.component';
import { RemoteAutocompleteModule } from "ng-remote-autocomplete";

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

• implement get method of AutocompleteSourceService or ParameterizedAutocompleteSourceService which returns array of AutocompleteItem

import { Observable } from "rxjs/Rx";
import { } from "rxjs/Rx";

import { AutocompleteItem } from "ng-remote-autocomplete";
import { AutocompleteSourceService } from "ng-remote-autocomplete";

export class ItemService implements AutocompleteSourceService {
  get(searchParam: string): Observable<AutocompleteItem[]> {
    let fakeResult:AutocompleteItem[]  = [
        {value: "A", description: " - One letter", originalObject: {}},
     ];

    return Observable.of(fakeResult).delay(150);
  }
}

• provide the sevice to the remote-autocomplete component as a parameter

import { Component } from  '@angular/core';
import { ItemService } from  './services/itm-service';

@Component({
selector:  'app-root',
template:  `<remote-autocomplete [service]="itemService"></remote-autocomplete>`,
providers: [ ItemService ]
})
export  class  AppComponent {
constructor(public  itemService:  ItemService) {
}

Exceptions

If you don't provide the service then the module will throw and Exception that AutocompleteSourceService or ParameterizedAutocompleteSourceService must be provided. If you provide ParameterizedAutocompleteSourceService service and don't provide searchParameters then autocmplete component will throw Exception.

Api

|Property Name|Description |Type|Required|Default value| | ------ | ------ |------ |------ |------ | | service | Implementation of AutocompleteSourceService or ParameterizedAutocompleteSourceService | AutocompleteSourceService | ParameterizedAutocompleteSourceService | true | minSearchLength | Minimum value length from which searching will be triggered | number | false|1 | autocompleteAttr | A value for the autocomplete attribute of the input | string | false|null | tabindex | A value for the tabindex attribute | number | false|null | maxChars | Allowable max length of search field | number | false | 2147483647| | pause | The pause after which searching will be triggered |number|false|100| | inputId | The id for the input |string|false|-| | inputName | The name for the input |string|false|-| | inputClass | The array of string for the input |string[]|false|-| | placeholder | The text to be placed as placeholder |string|false|-| | searchParameters | The search parameters which are passed to the search method of ParameterizedAutocompleteSourceService interface implementation |any|true only if type of service is ParameterizedAutocompleteSourceService |-| |disabled|The property if input should be disabled|boolean|false|false| |needToShowNotFoundText|The property which enable/disable showing not found text block|boolean|false|true| |notFoundText|The text which will be displayed if there is no result|string|false|"No results found"| |needToShowSearchingText|The property which enable/disable showing searching text block|boolean|false|true| |searchingText|The text which will be displayed during the search|string|false|"Searching..."| |stopEnterPropagationOnSelect|True if keydown event should not be dispatched when autocomplete item is selected using Enter key|boolean|false|false|

Output events

|Event Name|Type|Description| | ------ | ------ |------ | | type | - | The type event on the input | | highlighted | AutocompleteItem or null | The event is triggered when an option is higlighted with AutocompleteItem item or nul when it is unhighlighted | | selected | AutocompleteItem | The event is triggered when an option is selected | | focus | FocusEvent | The event is triggered when the input get focus | | blur | FocusEvent | Important: isn't fired when option is being selected and input loses focus|

Available classes

|Class|Description| | ------ | ------ | | .remote-autocomplete | The main class of the whole component | | .autocomplete-search-wrapper | The class of the div which contains loading, not found and otptions divs | | .option-list-wrapper | The class of the main div where options are placed | |.autocomplete-option|The class of an option| | .autocomplete-option-active | The class of the highlighted option | | .autocomplete-option-value | The class of the span where value is placed | | .autocomplete-option-description| The class of the span where description is placed | |.autocomplete-loading|The class of the span where loading text is shown| |.autocomplete-not-found|The class of the span where searching text is shown|

Available methods

The local reference of the remote-autocomplete component is a type of Autocomplete and provides the following methods:

|Method|Description| | ------ | ------ | | focus()|Set the focus to the input field| | open()|open the autocomplete where search parameters will be the current value, won't be open if the length of the current value is less than minSearchLength value.| |close() |close the autocomplete|

import { Component } from  '@angular/core';
import { ItemService } from  './services/itm-service';

@Component({
selector:  'app-root',
template:  `<remote-autocomplete [service]="itemService" #autocomplete></remote-autocomplete>`,
providers: [ ItemService ]
})
export  class  AppComponent {

@ViewChild('autocomplete') autocompleteField:  Autocomplete;
constructor(public  itemService:  ItemService) {
}

focus(){
this.autocompleteField.focus();
}
}

Template

The basic template will be used as default:

 <ng-template #defaultOptionTemplate>
    <span class="autocomplete-option-value">{{item.value}}</span>
    <span *ngIf="item.description" class="autocomplete-option-description">{{item.description}}</span>
</ng-template>

If you want to use some custom template you need to put this custom template into the remote-autocomplete component with remote-autocomplete-option-tmpl directive where item is a type of AutocompleteItem.

<remote-autocomplete [service]="itemService">
	<div *remote-autocomplete-option-tmpl="let item">
		<span>{{item.value}}</span>
	</div>
</remote-autocomplete>

ngModel

You can bind the value to the remote-autocomplete component as in example. If the value is defined on the moment of the initialization of your component then the bind value will be set to the input field.

import { Component } from  '@angular/core';
import { ItemService } from  './services/itm-service';

@Component({
selector:  'app-root',
template:  `<remote-autocomplete [service]="itemService" [(ngModel)]="value"></remote-autocomplete>`,
providers: [ ItemService ]
})
export  class  AppComponent {
private value: string = 'test';

constructor(public  itemService:  ItemService) {
}

License

MIT