A simple Angular2 typeahead/autocomplete component with no third-party dependencies.
npm install ng2-typeahead-startswithThis package is no longer being developed.
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.
###### my.component.ts
``javascript
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
`html
[list]="fruits"
[searchProperty]="'searchText'" [displayProperty]="'name'"
[maxSuggestions]="2"
(suggestionSelected)="fruitSelected($event)"
placeholder="Begin typing a fruit">
You selected {{ fruitName }}
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
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.
$3
Binding Property | Type | Remarks
------------ | ---------- | -------------
| 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.
$3
Event Binding | Remarks
------------ | -------------
(suggestionSelected) | Called when a suggestion has been selected. The only parameter is the selected item.
$3
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:
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.
The MIT License (see the LICENSE file for the full text)