[deprecated] ng2-typeahead

A simple Angular2 typeahead/autocomplete component.

This package is no longer being developed.

See ng2-typeahead on GitHub

Installation

1. A recommended way to install ng2-typeahead is through the npm package manager using the following command:

npm i ng2-typeahead --save

Alternatively, you can download it in a ZIP file.

2. Currently ng2-typeahead contains one directive: typeahead.

Example

my.component.ts

import { Typeahead } from 'ng2-typeahead';

@NgModule({
   declarations: [ Typeahead ],
})

@Component({
    selector: 'my-component',
    template: require('./my.component.html'),
    styles: [`
        .typeahead-input,
        .typeahead-typeahead{
            width: 250px;
            padding: 8px;
            border-radius: 5px;
        }
    `]
})
export class MyComponent {

  fruitName: string;
  fruits: any[] = [
    {
      id: 1,
      name: "Apple",
      searchText: "apple"
    },
    {
      id: 2,
      name: "Orange",
      searchText: "orange"
    },
    {
      id: 3,
      name: "Banana",
      searchText: "banana"
    }
  ];

  selectedFruit: any = this.fruits[0];

  public fruitSelected(fruit) {
    this.fruitName = fruit ? fruit.name : 'none';
  }

}

my.component.html

<typeahead
  [(ngModel)]="selectedFruit"
  [list]="fruits"
  [searchProperty]="'searchText'" [displayProperty]="'name'"
  [maxSuggestions]="2"
  (suggestionSelected)="fruitSelected($event)"
  placeholder="Begin typing a fruit">
</typeahead>

<p>You selected {{ fruitName }}</p>

The following adjustments may be required in systemjs.config.js to run the example code. Issue #7

var map = {
    ...
    'ng2-typeahead':              'node_modules/ng2-typeahead',                             
  };
  ...
  var packages = {
    ...
    'ng2-typeahead':              { main: 'ng2-typeahead.js', defaultExtension: 'js' }
  };

Demo

API for typeahead

This is the only directive. Provide a list of suggestions as an object array, specify the display and search properties, and handle the selection event however you like.

Properties

Note: displayProperty and searchProperty can be the same property or different properties based on your needs.

Events

Styles

Troubleshooting

Please follow this guidelines when reporting bugs and feature requests:

1. Use GitHub Issues board to report bugs and feature requests (not our email address)
2. Please always write steps to reproduce the error. That way we can focus on fixing the bug, not scratching our heads trying to reproduce it.

Thanks for understanding, and apologies for any issues experienced thus far.

License

The MIT License (see the LICENSE file for the full text)