angular-bootstrap-autocomplete

A simple autocomplete component for Angular and Bootstrap

Getting started

1. 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:

Configure it!

The angular-bootstrap-autocomplete component has several @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);

Selection event

There is also one event fired on selecting an option from the dropdown menu:

@Output() onEntrySelected = new EventEmitter();

Styling

You can style the component by using regular Bootstrap dropdown menu and input field classes and the added classes:

.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