92 lines
3.3 KiB
TypeScript
92 lines
3.3 KiB
TypeScript
import {Component, ElementRef} from '@angular/core';
|
|
|
|
|
|
@Component({
|
|
selector: 'autocomplete',
|
|
template: `
|
|
<div class="container" >
|
|
<div class="input-field col s12">
|
|
|
|
</div>
|
|
<label for="country">Country</label>
|
|
<input id="country" type="text" class="validate filter-input" [(ngModel)]=query (keyup)=filter() >
|
|
|
|
|
|
|
|
<div class="suggestions" *ngIf="filteredList.length > 0">
|
|
<ul class="list-group" *ngFor=" let item of filteredList" >
|
|
<li class="list-group-item" >
|
|
<a (click)="select(item)">{{item}}</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="selections" *ngIf="selectedList.length > 0">
|
|
<label for="selecteditems">Selected: </label>
|
|
<ul id ="selecteditems" class="nav nav-pills" *ngFor="let item of selectedList" >
|
|
<li role="presentation" (click)="remove(item)">{{item}} <span class="badge">X</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
`
|
|
})
|
|
export class AutocompleteComponent {
|
|
public query = '';
|
|
public countries = [ "Albania","Andorra","Armenia","Austria","Azerbaijan","Belarus",
|
|
"Belgium","Bosnia & Herzegovina","Bulgaria","Croatia","Cyprus",
|
|
"Czech Republic","Denmark","Estonia","Finland","France","Georgia",
|
|
"Germany","Greece","Hungary","Iceland","Ireland","Italy","Kosovo",
|
|
"Latvia","Liechtenstein","Lithuania","Luxembourg","Macedonia","Malta",
|
|
"Moldova","Monaco","Montenegro","Netherlands","Norway","Poland",
|
|
"Portugal","Romania","Russia","San Marino","Serbia","Slovakia","Slovenia",
|
|
"Spain","Sweden","Switzerland","Turkey","Ukraine","United Kingdom","Vatican City"];
|
|
public filteredList = [];
|
|
public selectedList = [];
|
|
public elementRef;
|
|
|
|
constructor(myElement: ElementRef) {
|
|
this.elementRef = myElement;
|
|
}
|
|
|
|
filter() {
|
|
if (this.query !== ""){
|
|
this.filteredList = this.countries.filter(function(el){
|
|
return el.toLowerCase().indexOf(this.query.toLowerCase()) > -1;
|
|
}.bind(this));
|
|
}else{
|
|
this.filteredList = [];
|
|
}
|
|
}
|
|
|
|
select(item){
|
|
this.query = "";
|
|
this.filteredList = [];
|
|
this.selectedList.push(item);
|
|
console.info("Select:"+this.selectedList);
|
|
for (var i = 0; i < this.selectedList.length; i++) {
|
|
console.log(this.selectedList[i]);
|
|
}
|
|
}
|
|
remove(item){
|
|
var index:number =this.selectedList.indexOf(item);
|
|
console.info("Try to remove item from :"+this.selectedList.indexOf(item));
|
|
if (index > -1) {
|
|
this.selectedList.splice(index, 1);
|
|
}
|
|
console.info("Item removed "+this.selectedList.indexOf(item));
|
|
}
|
|
handleClick(event){
|
|
var clickedComponent = event.target;
|
|
var inside = false;
|
|
do {
|
|
if (clickedComponent === this.elementRef.nativeElement) {
|
|
inside = true;
|
|
}
|
|
clickedComponent = clickedComponent.parentNode;
|
|
} while (clickedComponent);
|
|
if(!inside){
|
|
this.filteredList = [];
|
|
}
|
|
}
|
|
}
|