A simple autocomplete component for Angular and Bootstrap
npm install angular-bootstrap-autocomplete1. As of now, you can either clone the component from the Github repository:
git clone http://github.com/DGarvanski/angular-bootstrap-autocomplete.git
or install via NPM:npm install angular-bootstrap-autocomplete --save
2. Import/Include the BootstrapAutocompleteModule
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
HttpModule,
RoutingModule,
BootstrapAutocompleteModule <--//
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}3. Add the component wherever you need it:
@Input() properties that you need and/or can use:1. @Input() entries: Array (required):
The array that will populate the autocomplete options
2. @Input() entryProperty: string (optional):
Use this if you need to display/filter by a specific property of an object
Example:
myAwesomeArrayOfAwesomeStuff = [{name: "Cyborg Duck", powerLevel: "Unlimited" }]
This will filter the entries by the name property and display the name in the options and input field.
3. @Input() inputPlaceholder: string (Default: "Search...", optional):
Text for the input field placeholder
4. @Input() inputId: string | number (Default: 0, optional if there's only one instance of the component, required if there are 2 or more):
Modifies the id of the input field and dropdown menu. Should be used when having more than one on a page (TODO: Should be replaced by an element reference);
@Output() onEntrySelected = new EventEmitter();
.bs-autocomplete-container - The wrapping container that sets the position to relative
.bs-autocomplete-input - Additional styles for the input field
.bs-autocomplete-menu - Sets the positioning for the dropdown menu inside the container