Autocomplete overview

Overview
API
Theme
Examples

NbAutocompleteDirective

The NbAutocompleteDirective provides a capability to expand input with NbAutocompleteComponent overlay containing options to select and fill input with.

Showcase

Installation

Import NbAutocompleteModule to your feature module.

@NgModule({
  imports: [
    // ...
    NbAutocompleteModule,
  ],
})
export class PageModule { }

Usage

You can bind control with form controls or ngModel.

Autocomplete form binding

Options in the autocomplete may be grouped using nb-option-group component.

Grouping

Autocomplete may change selected option value via provided function.

Custom display

Also, autocomplete may make first option in option list active automatically.

Active first

NbAutocompleteComponent

The NbAutocompleteComponent overlay component. Provides an NbOptionList overlay component.

NbOptionListComponent

The NbOptionListComponent is container component for NbOptionGroupComponent andNbOptionComponent list.

NbOptionGroupComponent

NbOptionGroupComponent

Select
Previous page
Datepicker
Next page

Need some help or found an issue?

Ask on Stack Overflow with tag `nebular` or post an issue on GitHub.