/** Add Transpiler for Typescript */
System.config({
  transpiler: 'typescript',
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  packages: {
    '.': {
      defaultExtension: 'ts'
    },
    'vendor': {
      defaultExtension: 'js'
    }
  }
});

System.config({
  map: {
    'main': 'main.js',

    // Angular specific mappings.
    '@angular/core': 'https://unpkg.com/@angular/core/bundles/core.umd.js',
    '@angular/common': 'https://unpkg.com/@angular/common/bundles/common.umd.js',
    '@angular/compiler': 'https://unpkg.com/@angular/compiler/bundles/compiler.umd.js',
    '@angular/http': 'https://unpkg.com/@angular/http/bundles/http.umd.js',
    '@angular/forms': 'https://unpkg.com/@angular/forms/bundles/forms.umd.js',
    '@angular/router': 'https://unpkg.com/@angular/router/bundles/router.umd.js',
    '@angular/platform-browser': 'https://unpkg.com/@angular/platform-browser/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'https://unpkg.com/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
    '@angular/material': 'https://unpkg.com/@angular/material/bundles/material.umd.js',

    // Rxjs mapping
    'rxjs': 'https://unpkg.com/rxjs',
  },
  packages: {
    // Thirdparty barrels.
    'rxjs': { main: 'index' },
  }
});

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {MaterialModule} from '@angular/material';
import {AutocompleteExample} from './autocomplete';
import {DataService} from './http-mock-service.ts';

@NgModule({

  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    MaterialModule,
  ],

  declarations: [AutocompleteExample],
  bootstrap: [AutocompleteExample],
  providers: [DataService]
})
export class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);

import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';
import 'rxjs/add/operator/startWith';
import {DataService, ExampleDataMode} from './http-mock-service';

@Component({
    selector: 'autocomplete-example',
    template: `
    <!-- SEARCH BOX -->
    <md-input-container>
      <input mdInput placeholder="State" [mdAutocomplete]="auto" [formControl]="stateCtrl">
    </md-input-container>

    <!-- Aoutocomplete options list -->
    <md-autocomplete #auto="mdAutocomplete" [displayWith]="displayFn">
      <md-option *ngFor="let state of filteredStates | async" [value]="state">
      {{ state.name }}
      </md-option>
    </md-autocomplete>
    
    {{ selectedOption | json  }}
    
    <div style="background: grey" *ngIf="selectedOption">
      <label>Selected option Obj: </label>
      <p>id: {{ selectedOption.id }} Name: {{ selectedOption.name }}</p>
    </div>

    <!-- Available option list -->
    <div>
      <h3>List of available options</h3>
      <md-chip-list>
        <md-chip *ngFor="let state of _availableOptions" color="accent">
          {{ state.name }}
        </md-chip>
      </md-chip-list>
    </div>

    `,
})
export class AutocompleteExample {
    stateCtrl: FormControl;
    filteredStates: any;
    selectedOption: ExampleDataMode;
    _availableOptions: ExampleDataMode[];

    constructor(private dataService: DataService) {
        this.stateCtrl = new FormControl();
        this.filteredStates = this.stateCtrl.valueChanges
        .startWith(null)
        .map(obj => obj && typeof obj === 'object' ? obj.name : obj)
        .map(name => name ? this._filterStates(name) : []);
    }

    _filterStates(val: string) {
        return val ? this._availableOptions.filter((s) => {
            return new RegExp(val, 'gi').test(s.name);
        }) : this.states;
    }

    // Set single value for search box
    displayFn(state: ExampleDataMode): string {
        this.selectedOption = state;
        console.debug('Selected: ', this.selectedOption);
        return state ? state.name : '';
    }

    // Get data from MOCK service
    _getDataFromService(value: string) {
        this.dataService.getData()
        .then(data => {
            this._availableOptions = data
        });
    }

    ngOnInit() {
        // Get all option
        this._getDataFromService('');
        console.debug('Selected: ', this.selectedOption);
    }

}

<!DOCTYPE html>
<html>
<head>
  <title>Angular2 Material - Autocomplete with service data</title>

  <!-- Load common libraries -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/2.0.3/typescript.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.6.25/zone.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>

  <!-- Configure SystemJS -->
  <script src="systemjs.config.js"></script>

  <script>
    System
      .import('main.ts')
      .catch(console.error.bind(console));
  </script>

  <!-- Load the Angular Material stylesheet -->
  <link href="https://unpkg.com/@angular/material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <style>body { font-family: Roboto, Arial, sans-serif; }</style>
</head>

<body>
<autocomplete-example>Loading Material - Autocomplete example...</autocomplete-example>
</body>

</html>

import { Injectable } from '@angular/core';

@Injectable()
export class DataService {
  getData(): Promise<ExampleDataMode[]> {
    return Promise.resolve(EXAMPLEDATA);
  }
}

export const EXAMPLEDATA: ExampleDataMode[] = [
  {id: 11, name: 'Mr. Nice'},
  {id: 12, name: 'Narco'},
  {id: 13, name: 'Bombasto'},
  {id: 14, name: 'Celeritas'},
  {id: 15, name: 'Magneta'},
  {id: 16, name: 'RubberMan'},
  {id: 17, name: 'Dynama'},
  {id: 18, name: 'Dr IQ'},
  {id: 19, name: 'Magma'},
  {id: 20, name: 'Tornado'}
];

export class ExampleDataMode {
  id: number;
  name: string;
}