Angular 1 and Angular 2 Integration

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.


ANIL SINGH

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Buy Books Online at Best Prices

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.