title: Angular Material md-autocomplete does not work with Angular2 code restated from Angular1 demo
body: <p>I am using ng2-material to enable Material Design in an Angular2 app. It seems to be a wrapper over the Angular1 MD code. Lots works, but I can't get md-autocomplete to work.  The problems are: 1. the Home component does not load. 2. get a Console error - loadAll() is not defined, 3. no form input box appears when I remove the JS to get something to load, 4. get a typescript error in Atom editor that each function statement expects ' ; ' before the {</p>
  
  <p>Sorry for so much code, but I'm hoping the problem(s) is simple.<br>
  The HTML copied from the MD example is:</p>
  
  <pre><code> &lt;md-list-item layout="column" class= "md-padding"&gt;
      &lt;form (click)="$event.preventDefault()"&gt; 
        &lt;md-autocomplete
          md-selected-item="selectedItem"
          md-search-text-change="searchTextChange(searchText)"
          md-search-text="searchText"
          md-selected-item-change="selectedItemChange(item)"
          md-items="item in querySearch(searchText)"
          md-item-text="item.display"
          md-min-length="0"
          &lt;md-item-template&gt;
            &lt;span md-highlight-text="searchText" md-highlight-flags="^i"&gt;{{item.display}}&lt;/span&gt;
          &lt;/md-item-template&gt;
          &lt;md-not-found&gt;
            No "{{searchText}}" language was found.
          &lt;/md-not-found&gt;
          STATE
        &lt;/md-autocomplete&gt;
      &lt;/form&gt;
    &lt;/md-list-item&gt;
  </code></pre>
  
  <p>The example at material.angularjs.org/latest/demo also has Angular1 javascript. I tried to convert it to Angular2 by: 1. removing ctrl, 2.put the "this" statements in constructor(), 3.changed the function statements to object notation, but kept the logic, 4.changed $log to console.log, 5. removed $q in an unused query and replaced with console.log. So my Angular2 code is:</p>
  
  <pre><code>export class Home {
  constructor () {
  var self = this;
  self.simulateQuery = false;
  self.isDisabled    = false;
  // list of `state` value/display objects
  self.states = loadAll();
  self.querySearch = querySearch;
  self.selectedItemChange = selectedItemChange;
  self.searchTextChange = searchTextChange;
  self.newState = newState;
  function newState(state) {
  alert("Sorry! You'll need " + state + " first!");
  }
  querySearch (query, string) {
  var results = query ? self.states.filter( createFilterFor(query) ) : self.states,
      deferred;
  if (self.simulateQuery) {
    console.log('self.simulateQuery is now true ' + text);;
  } else {
    return results;
  }
  }
  searchTextChange(text, string) {
  console.log('Text changed to ' + text);
  }
  selectedItemChange(item, string) {
  console.log('Item changed to ' + JSON.stringify(item));
  }
  loadAll(state, string) {
  var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware';
  return allStates.split(/, +/g).map( function (state) {
    return {
      value: state.toLowerCase(),
      display: state
    };
  });
  }
  
  createFilterFor(query, string) {
  var lowercaseQuery = angular.lowercase(query);
  return function filterFn(state) {
    return (state.value.indexOf(lowercaseQuery) === 0);
  };
  }
  
  } //end of constructor()
  } //end of Home
  </code></pre>