# ng2-typeahead-samoilenkoevgeniy

> A simple Angular2 typeahead/autocomplete component with no third-party dependencies.

Latest version **0.5.17** (published 2016-07-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install ng2-typeahead-samoilenkoevgeniy
pnpm add ng2-typeahead-samoilenkoevgeniy
yarn add ng2-typeahead-samoilenkoevgeniy
bun add ng2-typeahead-samoilenkoevgeniy
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.5.17 |
| Published | 2016-07-25 |
| First published | 2016-07-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 32 |
| Author | Joe Brinkman |
| Maintainers | samoilenkoevgeniy |
| Keywords | angular, angular2, typeahead, angularjs, autocomplete, ng2, ng |

## Links

- npm: https://www.npmjs.com/package/ng2-typeahead-samoilenkoevgeniy
- Repository: https://github.com/brinkmanjg/ng2-typeahead
- Issues: https://github.com/brinkmanjg/ng2-typeahead/issues
- npm.io page: https://npm.io/package/ng2-typeahead-samoilenkoevgeniy

## Alternatives

- [angular-pipes](https://npm.io/package/angular-pipes.md) — 5.6K weekly downloads
- [@ng-web-apis/midi](https://npm.io/package/@ng-web-apis/midi.md) — 2.6K weekly downloads
- [happn-3](https://npm.io/package/happn-3.md) — 1.6K weekly downloads
- [@opensip-cli/lang-go](https://npm.io/package/@opensip-cli/lang-go.md) — 1.2K weekly downloads
- [mongoose-typescript](https://npm.io/package/mongoose-typescript.md) — 85 weekly downloads

## Recent versions

- 0.5.17 (latest) — 2016-07-25

## README

# ng2-typeahead [![npm version](https://badge.fury.io/js/ng2-typeahead.svg)](http://badge.fury.io/js/ng2-typeahead)
A simple Angular2 typeahead/autocomplete component with no third-party dependencies.

[See ng2-typeahead on GitHub](https://github.com/brinkmanjg/ng2-typeahead)

[![Angular 2 Style Guide](https://mgechev.github.io/angular2-style-guide/images/badge.svg)](https://github.com/mgechev/angular2-style-guide)
[![Join the chat at https://gitter.im/brinkmanjg/ng2-bootstrap](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/brinkmanjg/ng2-bootstrap?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
[![Dependency Status](https://david-dm.org/brinkmanjg/ng2-typeahead.svg)](https://david-dm.org/brinkmanjg/ng2-typeahead)
[![devDependency Status](https://david-dm.org/brinkmanjg/ng2-typeahead/dev-status.svg)](https://david-dm.org/brinkmanjg/ng2-typeahead#info=devDependencies)
[![Throughput Graph](https://graphs.waffle.io/brinkmanjg/ng2-typeahead/throughput.svg)](https://waffle.io/brinkmanjg/ng2-typeahead/metrics)

## Installation

1. A recommended way to install ***ng2-typeahead*** is through the [npm](https://www.npmjs.com/search?q=ng2-typeahead) package manager using the following command:

  `npm i ng2-typeahead --save`

  Alternatively, you can [download it in a ZIP file](https://github.com/brinkmanjg/ng2-typeahead/archive/master.zip).

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


### Example

###### my.component.ts
```javascript
import {Typeahead} from 'ng2-typeahead'

@Component({
    selector: 'my-component',
    template: require('./my.component.html'),
    directives: [Typeahead]
})
export class MyComponent {

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

  selectedFruit: any;

  public fruitSelected(fruit) {
    this.selectedFruit = fruit;
  }

}
```

###### my.component.html
```html
<typeahead
  [list]="items"
  [searchProperty]="'searchText'" [displayProperty]="'name'"
  [maxSuggestions]="2"
  (suggestionSelected)="fruitSelected($event)"
  placeholder="Begin typing a fruit">
</typeahead>
```

###### Demo
![](https://cloud.githubusercontent.com/assets/6796665/16323353/2755a59e-3978-11e6-874c-905a0459d7a5.gif)


## 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

Binding Property | Type | Remarks
------------ | ---------- | -------------
`[list]` | `any[]` | The complete list of items. These can be any type of object. This is required.
`[displayProperty]` | `string` | The property of a list item that should be displayed. The default is 'name'.
`[searchProperty]` | `string` | The property of a list item that should be used for matching. The default is 'name'.
`[maxSuggestions]` | `number` | The maximum number of suggestions to display. The default is -1 (no limit).

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


### Events

Event Binding | Remarks
------------ | -------------
`(suggestionSelected)` | Called when a suggestion has been selected. The only parameter is the selected item.


### Styles

Selector | Remarks
------------ | -------------
`.typeahead` | The outer `div` which holds all component elements.
`.typeahead-input` | The `input` element into which the user enters text.
`.typeahead-input-has-selection` | The `input` element into which the user enters text when a suggestion is selected. This alerts the user that a selection has been made.
`.typeahead-typeahead` | The type-ahead `input` element which displays the suggested text.
`.typeahead-suggestions` | The `div` which holds the suggestions elements.
`.typeahead-suggestions ul` | The unordered list of suggestions.
`.typeahead-suggestions ul li` | The individual suggestion elements.
`.typeahead-suggestion-active` | The active (highlighted) suggestion in the suggestions list.



# Troubleshooting

Please follow this guidelines when reporting bugs and feature requests:

1. Use [GitHub Issues](https://github.com/brinkmanjg/ng2-typeahead/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](https://github.com/brinkmanjg/ng2-typeahead/blob/master/LICENSE) file for the full text)

---
_Source: https://npm.io/package/ng2-typeahead-samoilenkoevgeniy · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._