從 API 獲取 md-autocompletes options 可搜尋的資料

data.service.ts：

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class DataService {

  constructor(private http: Http) { }

  fetchData(){
    return this.http.get('https://dinstruct-d4b62.firebaseio.com/.json')
      .map((res) => res.json())
    
  }

}

自動完成 - 概述 - example.html 的：

<md-input-container>
  <input mdInput placeholder="Name" [mdAutocomplete]="auto" [formControl]="stateCtrl">
</md-input-container>

<md-autocomplete #auto="mdAutocomplete" [displayWith]="displayFn">
  <md-option *ngFor="let sector of filteredSectors | async" [value]="sector">
    {{ sector.name }}
  </md-option>
</md-autocomplete>

<div>
    <h2>Data :</h2>
    <span>{{ allSectors | json  }}</span>
</div>

自動完成 - 概述 - example.ts：

import {Component, OnInit} from '@angular/core';
import {FormControl} from '@angular/forms';

import { DataService } from './data.service'; 
import 'rxjs/add/operator/startWith';
import 'rxjs/add/operator/map';

@Component({
  selector: 'autocomplete-overview-example',
  templateUrl: './autocomplete-overview-example.html',
})
export class AutocompleteOverviewExample implements OnInit{
  stateCtrl: FormControl;
  
  filteredSectors: any;
  
  allSectors;

  constructor(private dataService: DataService) {
    this.stateCtrl = new FormControl();
  }
  
  ngOnInit(){
    this.dataService.fetchData()
      .subscribe(
        (data) => {
          this.allSectors = data.customers;
          this.filteredSectors = this.stateCtrl.valueChanges
            .startWith(null)
            .map(val => val ? this.filter(val) : this.allSectors.slice());
        }
    );
    
  }

  filter(name) {
   return this.allSectors.filter(sector => new RegExp(`^${name}`, 'gi').test(sector.name)); 
  }
  
   displayFn(sector) {
      return sector ? sector.name : sector;
   }

}

例項