Angular Autocomplete Example

Angular 2 autocomplete is a completion feature (Component) to show more results depending on the user input.

angular 2 autocomplete example
angular 2 autocomplete example

When a user enters a word the angular 2 autocomplete will show a list of suggestions to complete the word (e.g. angu => angular)

or 

By pressing the tab from keyboard to show the next word (e.g. angular [space] => angular 2)

live example at the end of the article

Angular 2 Autocomplete Example
Angular 2 Autocomplete Example

In angular 2 autocomplete Example we will see how to build auto complete based on bootstrap.

build auto complete
build auto complete

Include bootstrap before we start (it’s easy : ) )

<link href=”https://maxcdn.bootstrapcdn.com/bootstrap/x.x.x/css/bootstrap.min.css” rel=”stylesheet”>

Main app code source:

/**
 * Created by Tareq Boulakjar. from angulartypescript.com
 */

import {Component, ElementRef, ViewEncapsulation} from 'angular2/core';
import {Component} from 'angular2/core';
import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/common';
import {AutocompleteContainer} from './autocomplete-container';
import {Autocomplete} from './autocomplete.component';
export const AUTOCOMPLETE_DIRECTIVES = [Autocomplete, AutocompleteContainer];


/*Angular 2 Autocomplete Example*/
@Component({
    selector: 'my-app',

    template:`
                <div class='container-fluid'>
                    <h3>Angular 2 Autocomplete Example</h3>
                    <h4>The Selected Car: {{selectedCar}}</h4>
                    <input [(ngModel)]="selectedCar"
                           [autocomplete]="carsExample2"
                           (autocompleteOnSelect)="autocompleteOnSelect($event)"
                           [autocompleteOptionField]="'name'"
                           class="form-control">

                    <h3>Asynchronous results</h3>
                    <h4>Model: {{asyncSelectedCar}}</h4>
                    <input [(ngModel)]="asyncSelectedCar"
                           [autocomplete]="getAsyncData(getCurrentContext())"
                           (autocompleteLoading)="changeAutocompleteLoading($event)"
                           (autocompleteNoResults)="changeAutocompleteNoResults($event)"
                           (autocompleteOnSelect)="autocompleteOnSelect($event)"
                           [autocompleteOptionsLimit]="7"
                           placeholder="Locations loaded with timeout"
                           class="form-control">
                    <div [hidden]="autocompleteLoading!==true">
                        <i class="glyphicon glyphicon-refresh ng-hide" style=""></i>
                    </div>
                    <div [hidden]="autocompleteNoResults!==true" class="" style="">
                        <i class="glyphicon glyphicon-remove"></i> Empty Query !
                    </div>
                </div>
               `,
    directives: [AUTOCOMPLETE_DIRECTIVES, CORE_DIRECTIVES, FORM_DIRECTIVES],
})
export class Angular2Autocomplete {
    private selectedCar:string = '';
    private asyncSelectedCar:string = '';
    private autocompleteLoading:boolean = false;
    private autocompleteNoResults:boolean = false;
    private carsExample1:Array<string> = ['BMW', 'Audi','Mercedes','Porsche','Volkswagen','Opel','Maserati','Volkswagen','BMW Serie 1','BMW Serie 2'];
    private carsExample2:Array<any> = [
        {id: 1, name: 'BMW'},
        {id: 2, name: 'Audi'},
        {id: 3, name: 'Mercedes'},
        {id: 4, name: 'Porsche'},
        {id: 5, name: 'Volkswagen'},
        {id: 6, name: 'Opel'},
        {id: 7, name: 'Maserati'},
        {id: 8, name: 'Volkswagen'},
        {id: 9, name: 'BMW Serie 1'},
        {id: 10, name: 'BMW Serie 2'},
    ];


    private getCurrentContext() {
        return this;
    }

    private _cachedResult:any;
    private _previousContext:any;

    private getAsyncData(context:any):Function {
        if (this._previousContext === context) {
            return this._cachedResult;
        }

        this._previousContext = context;
        let f:Function = function ():Promise<string[]> {
            let p:Promise<string[]> = new Promise((resolve:Function) => {
                setTimeout(() => {
                    let query = new RegExp(context.asyncSelectedCar, 'ig');
                    return resolve(context.carsExample1.filter((state:any) => {
                        return query.test(state);
                    }));
                }, 500);
            });
            return p;
        };
        this._cachedResult = f;
        return this._cachedResult;
    }

    private changeAutocompleteLoading(e:boolean) {
        this.autocompleteLoading = e;
    }

    private changeAutocompleteNoResults(e:boolean) {
        this.autocompleteNoResults = e;
    }

    private autocompleteOnSelect(e:any) {
        console.log(`Selected value: ${e.item}`);
    }
}

angular-2-ui-framework

all files from here: angular-2-autocomplete-example

angular 2 autocomplete