Angular2, Autocomplete Process

[sri devi]

Hi

I am new to Angular. I need to Integrate Autocomplete process in angular2.

I am facing error, "ORIGINAL EXCEPTION: TypeError: el.toLowerCase is not a function"

import {Component} from 'angular2/core';

import {Http, HTTP_PROVIDERS} from 'angular2/http';

import 'rxjs/add/operator/map'

@Component({

    selector: 'page2',

     template: `<h3>Welcome to AutoComplete </h3>

        <div class="container" >

            <div class="input-field col s12">

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

              <input id="country" type="text" class="validate filter-input" [(ngModel)]=query (keyup)=filter()>

             

            </div>

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

                <ul *ngFor="#item of names" >

                    <li >

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

                    </li>

                </ul>

            </div>

        </div>      

        `

  

  })

export class Autocomplete {

        

    public query = ''; 

        

    public filteredList = []; 

       

    public elementRef; 

    

  constructor(private http: Http) {

        

        http.get('app/mock/names.json')

       .map(res => res.json())

       .subscribe(names => this.names = names);

        

      }

   

  filter() {

    if (this.query !== ""){

        this.filteredList = this.names.filter(function(el){

            return el.toLowerCase().indexOf(this.query.toLowerCase()) > -1;

        }.bind(this));

    }else{

        this.filteredList = [];

     }

    }  

    

}

[Gilberto García]

<ul *ngFor="#item of names" >

Así te debería quedar.

<ul *ngFor=" let item of names" >