<md-autocomplete
   flex ng-cloak
   md-input-name="query"
   md-input-id="query"
   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.label"
   md-min-length="3"
   placeholder="Search">
  <md-item-template>
    <span md-highlight-text="searchText" md-highlight-flags="^i">{{item.label}}</span>
    <span ng-show="item.label != item.preflabel">(preferred: {{item.preflabel}})</span>
    <span ng-show="item.types.length > 0">
      (<span ng-repeat="t in item.types">{{t.label}}</span><span ng-if="!$last">, </span>)
    </span>
  </md-item-template>
  <md-not-found>
    Nothing matches "{{searchText}}".
    <a ng-click="newNode()(searchText)">Create it.</a>
  </md-not-found>
  <input type="hidden" name="search" ng-bind="searchText"/>
</md-autocomplete>
