Nebular - Autocomplete Angular UI Component

NbAutocompleteDirective

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

12345678910111213141516171819202122232425262728293031323334353637383940414243

import { ChangeDetectionStrategy, Component, ViewChild, OnInit } from '@angular/core';
import { Observable, of } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'nb-autocomplete-showcase',
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: './autocomplete-showcase.component.html',
})
export class AutocompleteShowcaseComponent implements OnInit {

  options: string[];
  filteredOptions$: Observable<string[]>;

  @ViewChild('autoInput') input;

  ngOnInit() {
    this.options = ['Option 1', 'Option 2', 'Option 3'];
    this.filteredOptions$ = of(this.options);
  }

  private filter(value: string): string[] {
    const filterValue = value.toLowerCase();
    return this.options.filter(optionValue => optionValue.toLowerCase().includes(filterValue));
  }

  getFilteredOptions(value: string): Observable<string[]> {
    return of(value).pipe(
      map(filterString => this.filter(filterString)),
    );
  }

  onChange() {
    this.filteredOptions$ = this.getFilteredOptions(this.input.nativeElement.value);
  }

  onSelectionChange($event) {
    this.filteredOptions$ = this.getFilteredOptions($event);
  }

}

123456789101112131415161718192021

<nb-card size="small">
  <nb-card-body>

    <input #autoInput
      nbInput
      type="text"
      (input)="onChange()"
      placeholder="Enter value"
      [nbAutocomplete]="auto" />

    <nb-autocomplete #auto (selectedChange)="onSelectionChange($event)">

      <nb-option *ngFor="let option of filteredOptions$ | async" [value]="option">
        {{ option }}
      </nb-option>

    </nb-autocomplete>

  </nb-card-body>
</nb-card>

Installation

Import NbAutocompleteModule to your feature module.

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

Usage

You can bind control with form controls or ngModel.

1234567891011121314151617181920212223242526272829303132333435363738394041424344

import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { Observable, of } from 'rxjs';

import { FormControl } from '@angular/forms';
import { map, startWith } from 'rxjs/operators';

@Component({
  selector: 'nb-autocomplete-showcase',
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: './autocomplete-form.component.html',
})
export class AutocompleteFormComponent implements OnInit {

  options: string[];
  filteredControlOptions$: Observable<string[]>;
  filteredNgModelOptions$: Observable<string[]>;
  inputFormControl: FormControl;
  value: string;

  ngOnInit() {

    this.options = ['Option 1', 'Option 2', 'Option 3'];
    this.filteredControlOptions$ = of(this.options);
    this.filteredNgModelOptions$ = of(this.options);

    this.inputFormControl = new FormControl();
    this.filteredControlOptions$ = this.inputFormControl.valueChanges
      .pipe(
        startWith(''),
        map(filterString => this.filter(filterString)),
      );
  }

  private filter(value: string): string[] {
    const filterValue = value.toLowerCase();
    return this.options.filter(optionValue => optionValue.toLowerCase().includes(filterValue));
  }

  onModelChange(value: string) {
    this.filteredNgModelOptions$ = of(this.filter(value));
  }
}

12345678910111213141516171819202122232425262728293031323334353637

<nb-card size="small">
  <nb-card-body class="example-items-rows">

    <input
      [formControl]="inputFormControl"
      nbInput
      type="text"
      placeholder="Form control"
      [nbAutocomplete]="autoControl" />

    <nb-autocomplete #autoControl>

      <nb-option *ngFor="let option of filteredControlOptions$ | async" [value]="option">
        {{ option }}
      </nb-option>

    </nb-autocomplete>

    <input
      [ngModel]="value"
      (ngModelChange)="onModelChange($event)"
      nbInput
      type="text"
      placeholder="ngModel"
      [nbAutocomplete]="autoNgModel" />

    <nb-autocomplete #autoNgModel>

      <nb-option *ngFor="let option of filteredNgModelOptions$ | async" [value]="option">
        {{ option }}
      </nb-option>

    </nb-autocomplete>

  </nb-card-body>
</nb-card>

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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172

import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { Observable, of } from 'rxjs';

import { FormControl } from '@angular/forms';
import { map, startWith } from 'rxjs/operators';

export interface Group {
  name: string;
  children: string[];
}

@Component({
  selector: 'nb-autocomplete-group',
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: './autocomplete-group.component.html',
})
export class AutocompleteGroupComponent implements OnInit {

  groups: Group[];
  filteredGroups$: Observable<Group[]>;
  inputFormControl: FormControl;

  ngOnInit() {

    this.groups = [
      {
        name: 'Group 1',
        children: ['Option 11', 'Option 12', 'Option 13'],
      },
      {
        name: 'Group 2',
        children: ['Option 21', 'Option 22', 'Option 23'],
      },
      {
        name: 'Group 3',
        children: ['Option 31', 'Option 32', 'Option 33'],
    }];

    this.filteredGroups$ = of(this.groups);
    this.inputFormControl = new FormControl();

    this.filteredGroups$ = this.inputFormControl.valueChanges
      .pipe(
        startWith(''),
        map(filterString => this.filter(filterString)),
      );

  }

  private filterChildren(children: string[], filterValue: string) {
    return children.filter(optionValue => optionValue.toLowerCase().includes(filterValue));
  }

  private filter(value: string): Group[] {
    const filterValue = value.toLowerCase();
    return this.groups
      .map(group => {
        return {
          name: group.name,
          children: this.filterChildren(group.children, filterValue),
        }
      })
      .filter(group => group.children.length);
  }

  trackByFn(index, item) {
    return item.name;
  }

}

1234567891011121314151617181920212223

<nb-card size="medium">
  <nb-card-body>

    <input
      [formControl]="inputFormControl"
      nbInput
      type="text"
      placeholder="Enter value"
      [nbAutocomplete]="auto" />

    <nb-autocomplete #auto>

      <nb-option-group *ngFor="let group of filteredGroups$ | async; trackBy: trackByFn"  [title]="group.name" >
        <nb-option *ngFor="let option of group.children" [value]="option">
          {{ option }}
        </nb-option>
      </nb-option-group>

    </nb-autocomplete>

  </nb-card-body>
</nb-card>

Autocomplete may change selected option value via provided function.

12345678910111213141516171819202122232425262728293031323334353637383940414243

import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { Observable, of } from 'rxjs';

import { FormControl } from '@angular/forms';
import { map, startWith } from 'rxjs/operators';

@Component({
  selector: 'nb-autocomplete-custom-display',
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: './autocomplete-custom-display.component.html',
})
export class AutocompleteCustomDisplayComponent implements OnInit {

  options: string[];
  filteredOptions$: Observable<string[]>;
  inputFormControl: FormControl;

  ngOnInit() {

    this.options = ['Option 1', 'Option 2', 'Option 3'];
    this.filteredOptions$ = of(this.options);

    this.inputFormControl = new FormControl();

    this.filteredOptions$ = this.inputFormControl.valueChanges
      .pipe(
        startWith(''),
        map(filterString => this.filter(filterString)),
      );

  }

  private filter(value: string): string[] {
    const filterValue = value.toLowerCase();
    return this.options.filter(optionValue => optionValue.toLowerCase().includes(filterValue));
  }

  viewHandle(value: string) {
    return value.toUpperCase();
  }
}

123456789101112131415161718192021

<nb-card size="small">
  <nb-card-body>

    <input
      [formControl]="inputFormControl"
      nbInput
      type="text"
      placeholder="Enter value"
      [nbAutocomplete]="auto" />

    <nb-autocomplete #auto [handleDisplayFn]="viewHandle">

      <nb-option *ngFor="let option of filteredOptions$ | async" [value]="option">
        {{ option }}
      </nb-option>

    </nb-autocomplete>

  </nb-card-body>
</nb-card>

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

12345678910111213141516171819202122232425262728293031323334353637383940

import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { Observable, of } from 'rxjs';

import { FormControl } from '@angular/forms';
import { map, startWith } from 'rxjs/operators';

@Component({
  selector: 'nb-autocomplete-active-first',
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: './autocomplete-active-first.component.html',
})
export class AutocompleteActiveFirstComponent implements OnInit {

  options: string[];
  filteredOptions$: Observable<string[]>;
  inputFormControl: FormControl;

  ngOnInit() {

    this.options = ['Option 1', 'Option 2', 'Option 3'];
    this.filteredOptions$ = of(this.options);

    this.inputFormControl = new FormControl();

    this.filteredOptions$ = this.inputFormControl.valueChanges
      .pipe(
        startWith(''),
        map(filterString => this.filter(filterString)),
      );

  }

  private filter(value: string): string[] {
    const filterValue = value.toLowerCase();
    return this.options.filter(optionValue => optionValue.toLowerCase().includes(filterValue));
  }

}

123456789101112131415161718192021

<nb-card size="small">
  <nb-card-body>

    <input
      [formControl]="inputFormControl"
      nbInput
      type="text"
      placeholder="Enter value"
      [nbAutocomplete]="auto" />

    <nb-autocomplete #auto [activeFirst]="true">

      <nb-option *ngFor="let option of filteredOptions$ | async" [value]="option">
        {{ option }}
      </nb-option>

    </nb-autocomplete>

  </nb-card-body>
</nb-card>