Angular Autocomplete

• See Demo or try in Stackblitz
• Example with images Stackblitz
• Example with Angular forms API Stackblitz

Table of contents

• Features
• Getting started
• Usage
• API
• Styles

Features

• <input checked="" disabled="" type="checkbox"> Flexible autocomplete with client/server filtering.
• <input checked="" disabled="" type="checkbox"> Variable properties and event bindings.
• <input checked="" disabled="" type="checkbox"> Selection history.
• <input checked="" disabled="" type="checkbox"> Custom item and 'not found' templates.
• <input checked="" disabled="" type="checkbox"> Infinite scroll.
• <input checked="" disabled="" type="checkbox"> Compatible with Angular forms API (Both Reactive and Template-driven forms).
• <input checked="" disabled="" type="checkbox"> Keyboard navigation.
• <input checked="" disabled="" type="checkbox"> Accessibility.

Getting started

Step 1: Install angular-ng-autocomplete:

NPM

npm i angular-ng-autocomplete

Step 2: Import the AutocompleteLibModule:

import {AutocompleteLibModule} from 'angular-ng-autocomplete';

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

Usage sample

<div class="ng-autocomplete">
<ng-autocomplete 
  [data]="data"
  [searchKeyword]="keyword"
  placeholder="Select country"
  (selected)='selectEvent($event)'
  (inputChanged)='onChangeSearch($event)'
  (inputFocused)='onFocused($event)'
  [itemTemplate]="itemTemplate"
  [notFoundTemplate]="notFoundTemplate">                                 
</ng-autocomplete>

<ng-template #itemTemplate let-item>
<a [innerHTML]="item.name"></a>
</ng-template>

<ng-template #notFoundTemplate let-notFound>
<div [innerHTML]="notFound"></div>
</ng-template>
</div>

class TestComponent {
  keyword = 'name';
  data = [
    {
      id: 1,
      name: 'Georgia'
    },
     {
       id: 2,
       name: 'Usa'
     },
     {
       id: 3,
       name: 'England'
     }
  ];


  selectEvent(item) {
    // do something with selected item
  }

  onChangeSearch(val: string) {
    // fetch remote data from here
    // And reassign the 'data' which is binded to 'data' property.
  }

  onFocused(e){
    // do something when input is focused
  }
}

API

Inputs

Outputs

Methods (controls)

Name | Description | | ------------- | ------------- | | open | Opens the autocomplete panel | | close | Closes the autocomplete panel | | focus | Focuses the autocomplete input element | | clear | Clears the autocomplete input element |

To access the control methods of the component you should use @ViewChild decorator. See the example below:

<ng-autocomplete #auto></ng-autocomplete>

class TestComponent {
  @ViewChild('auto') auto;

  openPanel(e): void {
    e.stopPropagation();
    this.auto.open();
  }

  closePanel(e): void {
    e.stopPropagation();
    this.auto.close();
    }

  focus(e): void {
    e.stopPropagation();
    this.auto.focus();
  }  
}

Styles

If you are not happy with default styles you can easily override them:

<div class="ng-autocomplete">
<ng-autocomplete></ng-autocomplete>
</div>

.ng-autocomplete {
    width: 400px;
}

Support Angular autocomplete!

If you do love angular-ng-autocomplete I would appreciate a donation :)

Author

• Giorgi Merabishvili

License

MIT

Changelog

All notable changes to this project will be documented in this file.

Version 2.0.10

Bug Fixes

• Infinite scroll bug fixed on browser resize.

Version 2.0.6

Features

• selectedValueRender: Custom renderer function to render selected value inside input field.
• Customizable icons.

Bug Fixes

• Angular upgraded to V 12.
• Removed automatic dependency on fonts.google.com.
• Fixed 'scrolledToEnd event fires together with closed event' issue.
• Accessibility improved.
• Minor fixes and improvements.

Version 2.0.5

Features

• customFilter: Custom filter function. You can use it to provide your own filtering function.

Since version 2.0.2, 2.0.3 and 2.0.4

Features

• focusFirst: Automatically focus the first matched item on the list.

Bug Fixes

• Set initial value during run time.
• Set/patch initial value when using reactive forms.
• Clear the input value when using template driven forms.
• Make autocomplete work with classes also, it used to work with objects only.
• Remove potential security vulnerability in one of the project dependencies.
• Other small fixes and improvements.

CHANGES

• 'placeHolder' changed to 'placeholder'.