Ngx Autocomplete

An easy to use and flexible Autocomplete angular component.

Usage

Install npm module.

npm i ngx-autocomplete

Dependencies

This package relies on the following peer dependencies:

• @angular/cdk: ^12.0.0

Please make sure to install them in your project before using this package.

Now import the module in your angular module, e.g. app.module.ts:

import { AutocompleteModule } from 'ngx-autocomplete';

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

In your template file, add the ngx-autocomplete tag to use component, e.g.:

<ngx-autocomplete [searchMethod]="searchMethod" viewKey="email"></ngx-autocomplete>

Configuration

You can pass the following attributes values of supported types for further customizations:

Attribute	Supported Type	Default	Description
minimumCharacterForSearch	number	0	Minumum character needs to start searching.
debounceTime	number	500	Miliseconds after user finished typing search term for triggering search method
suggestionItemClass	string	-	Custom CSS class applies tp every search result item.
suggestionContainerHeight	number	150	Search result dropdown height in pixell.
searchMethod	OperatorFunction | null | undefined	-	A function wich recoeves search term as an obcervable of string and returns array of search item as result.
suggestionKey	string	-	Object field for rendering for every search result item in search result drop down. If suggestionMethod was provided, suggestionMethod result uses for rendering item.
suggestionMethod	(item?: T) => string	-	Object field for rendering for every search result item in search result drop down. If suggestionMethod was provided, suggestionMethod result uses for rendering item.
idKey	string	id	Item field name uses in track by function for rendering search result items.
viewKey	string	-	Object field for showing selected item in search input.
viewMethod	(selection?: T) => string	-	The function that converts an item from the result list to a string to display in the input. It is called when the user selects something in the popup or the model value changes, so the input needs to be updated
placeholder	string	-	Search input placeholder attribute value.
noSuggestionText	string	"no item found."	Text shows when search result is empty.
clearButton	boolean	true	boolean value to show button for removing selected suggestion.
forceSuggestion	boolean	true	If set to false the input value use as selected item.
suggestionSelect	EventEmitter	-	The event that fiers after user has selected an item. The event handler recieves selected item as event argument.

Using custome templates

There are four directive for customising autocomplete appearance as follow.

<ngx-autocomplete [searchMethod]="searchMethod" viewKey="email">
  <!-- template shows in search result pop-up header -->
  <ng-template ngxSuggestionHeader>
      <h3>Employees</h3>
  </ng-template>

  <!-- template shows for every item in search result pop-up  -->
  <ng-template let-item ngxSuggestionContent>
      <span>Email Address {{item.emal}}</span>
  </ng-template>

  <!-- template shows empty search result pop-up  -->
    <ng-template ngxNoSuggestion>
      <span>search result is empty !!!</span>
  </ng-template>

  <!-- template shows for search result pop-up footer  -->
  <ng-template ngxSuggestionFooter>
      <span>Here is the footer</span>
  </ng-template>

</ngx-autocomplete>

License

@salmanian_hossein/ngx-autocomplete is free and licensed under the MIT License.