Create Angular 2 Autocomplete Examples

//IMPORT ANGULAR 2 CORE COMPONENTS.

import {Component} from 'angular2/core';

//INITIALIZATIONS OF SELECTOR AND TEMPLATE.

@Component({

    selector: 'autocomplete',

    template: 'autocomplete-filter.html'                

});

//THIS IS AUTOCOMPLETE COMPONENTS APP CLASS.

export class ComponentApp {

    //COUNTRIES LIST

    public countries = [{"name": "Brazil", "code": "BR"},

                        {"name": "Canada", "code": "CA"},

                        {"name": "France", "code": "FR"},

                        {"name": "India", "code": "IN"},

                        {"name": "Mexico", "code": "MX"},

                        {"name": "Nepal", "code": "NP"},

                        {"name": "New Zealand", "code": "NZ"},

                        {"name": "Reunion", "code": "RE"},

                        {"name": "Singapore", "code": "SG"},

                        {"name": "Spain", "code": "ES"},

                        {"name": "Sri Lanka", "code": "LK"},

                        {"name": "United Kingdom", "code": "GB"},

                        {"name": "United States", "code": "US"}];

   

    //CREATED THE VARIABLES FILTEREDITEMS AND REFELEMENT

    public filterKey = '';

    public filteredItems = [];

}

//FILTER DATA METHOD.

var filter = function(){

    if (this.filterKey !== ''){

        this.filteredItems = this.countries.filter(function(e){

            return (e.toLowerCase().substr(0, this.filterKey.length) ==

this.filterKey.toLowerCase()) == true;

        }.bind(this));

    }

    else{

        this.filteredItems = [];

    }

}

//SELCTION ITEM METHOD.

var select = function(item){

    this.filterKey = item;

    this.filteredItems = [];

}

//COUNTRY AUTOCOMPLETE HTML: autocomplete-filter.html

<div class="autocomplete-container">

    <div class="autocomplete-filter-section">

        <input type="text" [(ngModel)]=filterKey (keyup)=filter()>

        <label for="country">Country</label>

    </div>

    <div class="suggestions" *ngIf="filteredItems.length > 0">

        <div *ngFor="#item of filteredItems">

            <div>

                <a (click)="select(item)">{{item}}</a>

            </div>

        </div>

    </div>

</div>

The output look like below pic.