Angular 2 AutoComplete not working properly
<p>[When I type in inputs(list of countries), the autocomplete drops down a list of countries that matches my input. But the problem is I can't select a country from that list using mouse click][1]</p>

<p>I'm using angular2 and while doing a <code>typeahead(autocomplete)</code>, i'm struck with this <strong>error</strong> </p>

<pre><code>//app.component.js

    enter code here

import {Component, ElementRef} from 'angular2/core';

@Component({
    selector: 'my-app',
    host: {
        '(document:click)': 'handleClick($event)',
    },
    template: `
        &lt;div class="container" &gt;
            &lt;div class="input-field col s12"&gt;
              &lt;input id="country" type="text" class="validate filter-input" [(ngModel)]=query (keyup)=filter($event)  (blur)=handleBlur()&gt;
              &lt;label for="country"&gt;Country&lt;/label&gt;
            &lt;/div&gt;
            &lt;div class="suggestions" *ngIf="filteredList.length &gt; 0"&gt;
                &lt;ul *ngFor="#item of filteredList;#idx = index" &gt;
                    &lt;li [class.complete-selected]="idx == selectedIdx"&gt;
                        &lt;a (click)="select(item)"&gt;{{item}}&lt;/a&gt;
                    &lt;/li&gt;
                &lt;/ul&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        `
})

export class AppComponent {
    public query = '';
    public countries = ["Albania", "Andorra", "Armenia", "Austria", "Azerbaijan", "Belarus", "Belgium", "Bosnia &amp; 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 elementRef;
    selectedIdx: number;

    constructor(myElement: ElementRef) {
        this.elementRef = myElement;
        this.selectedIdx = -1;
    }

    filter(event: any) {
        if (this.query !== "") {
            this.filteredList = this.countries.filter(function (el) {
                return (el.toLowerCase().substr(0,this.query.length) === this.query.toLowerCase()) == true;
            }.bind(this));
            if (event.code == "ArrowDown" &amp;&amp; this.selectedIdx &lt; this.filteredList.length) {
                this.selectedIdx++;
            } else if (event.code == "ArrowUp" &amp;&amp; this.selectedIdx &gt; 0) {
                this.selectedIdx--;
            }
        } else {
            this.filteredList = [];
        }
    }

    select(item) {
        this.query = item;
        this.filteredList = [];
        this.selectedIdx = -1;
    }

    handleBlur() {
        if (this.selectedIdx &gt; -1) {
            this.query = this.filteredList[this.selectedIdx];
        }
        this.filteredList = [];
        this.selectedIdx = -1;
    }

    handleClick(event) {
        var clickedComponent = event.target;
        var inside = false;
        do {
            if (clickedComponent === this.elementRef.nativeElement) {
                inside = true;
            }
            clickedComponent = clickedComponent.parentNode;
        } while (clickedComponent);
        if `enter code here`(!inside) {
            this.filteredList = [];
        }
        this.selectedIdx = -1;
    }


}`

____________________________________________________________________________________________________________________________________________________
//main.ts
import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'

bootstrap(AppComponent);

____________________________________________________________________________________________________________________________________________________
//index.html
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;MasaCafe&lt;/title&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;    

    &lt;!-- 1. Load libraries --&gt;
    &lt;!-- IE required polyfills, in this exact order --&gt;
    &lt;script src="node_modules/core-js/client/shim.min.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/systemjs/dist/system-polyfills.js"&gt;&lt;/script&gt;

    &lt;script src="node_modules/angular2/bundles/angular2-polyfills.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/rxjs/bundles/Rx.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/angular2/bundles/angular2.dev.js"&gt;&lt;/script&gt;

    &lt;script src="https://code.jquery.com/jquery-2.2.1.min.js" &gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css"&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"&gt;&lt;/script&gt;

    &lt;link rel="stylesheet" href="style.css"&gt;&lt;/link&gt;

    &lt;!-- 2. Configure SystemJS --&gt;
    &lt;script&gt;
      System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/main')
            .then(null, console.error.bind(console));
    &lt;/script&gt;

  &lt;/head&gt;

  &lt;!-- 3. Display the application --&gt;
  &lt;body&gt;
    &lt;my-app&gt;Loading...&lt;/my-app&gt;
  &lt;/body&gt;

&lt;/html&gt;


What did I do wrong?


  [1]: http://i.stack.imgur.com/i06n3.png
</code></pre>