A simple Angular2 typeahead/autocomplete component.
This package is no longer being developed.
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.
Currently ng2-typeahead
contains one directive: typeahead
.
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';
}
}
<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' }
};
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.
Binding Property | Type | Remarks |
---|---|---|
[(ngModel)] |
any |
The model property to which the component is bound. Optional. |
[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.
Event Binding | Remarks |
---|---|
(suggestionSelected) |
Called when a suggestion has been selected. The only parameter is the selected item. |
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. |
Please follow this guidelines when reporting bugs and feature requests:
Thanks for understanding, and apologies for any issues experienced thus far.
The MIT License (see the LICENSE file for the full text)