NgSimpleAutocomplete

This project was generated with Angular CLI version 6.1.1.

Features

ng-simple-autocomplete2 is autocomplete component for Angular2+. It uses data(json array) and item(key in josn to populate dropdown) from it's parent component and filter based on search.

• Data filtering.
• Custom styling.
• Event binding.
• Multi-select with search
• Select using keyboard

Demo

• checkout usage and demo here

Play with code

• checkout code here

Installation

npm install ng-simple-autocomplete2

Add it to your Angular Module.

import { NgSimpleAutocompleteModule } from 'ng-simple-autocomplete2';

@NgModule({
  imports: [
    NgSimpleAutocompleteModule
  ]
})
export class AppModule { }

Usage

Template - somecomponent.component.html

<ng-simple-autocomplete
[placeholder]="placeholder"
[sourceArray]="data"
[fieldNameFormatter]="returnFieldFromObject"
(onSelect)="selectedObject($event)"
[multiSelect]="true">
</ng-simple-autocomplete>

Dataset properties and event - somecomponent.component.ts

export class SomeComponent {
  placeholder = "Search";
  // source array
  data = [{
    'code': '01',
    'day': [{
      'lang': 'english',
      'value': 'Sunday'
    }, {
      'lang': 'french',
      'value': 'dimanche'
    }],
    'month': [{
      'lang': 'english',
      'value': 'May'
    }, {
      'lang': 'french',
      'value': 'Mai'
    }]
  }
];

  returnFieldFromObject(item) {
	// item represent one object in above data array.
	// you can return any field that will be use to populate drop-down
    return item.day[0].value;
  }
  // Selected object
  selectedObject(item) {
	// do something with selected item (object)
    console.log(item);
  }
}