How can i open angular md-autocomplete programmatically?

Question

I need to open angular material md-autocomplete dropdown list on a specific event. Is there any way to do this?

I've got md-autocomplete with basic setup similar to this http://codepen.io/paucaverba/pen/GpogPv?editors=101

<div ng-controller="DemoCtrl as ctrl" layout="column" class="autocompletedemoBasicUsage" ng-app="MyApp">

  <md-autocomplete md-selected-item="ctrl.selectedItem" md-search-text="ctrl.searchText" md-items="item in ctrl.querySearch(ctrl.searchText)" md-item-text="item.display" md-min-length="0" placeholder="What is your favorite US state?">
    <md-item-template>
      <span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.display}}</span>
    </md-item-template>
    <md-not-found>
      No matches found for "{{ctrl.searchText}}".
    </md-not-found>
  </md-autocomplete>
  <br>
        <button class="md-button md-raised"> open </button>
</form>

If i click on control itself it will open the dropdown list. And i want the same behavior when i click on the "open" button

Answer 1

Give id="auto_complete_id" attribute to your md-autocomplete

You could try something like this: (Tested. This ought to work. This will not work on codepen though, it will throw an error in console)

Error in console on codepen( Looking up elements via selectors is not supported by jqLite! )

Test it on native browser.

HTML:

<button  ng-click=openAutocomplete()> Open </button>

JS:

$scope.openAutocomplete=function(){
   setTimeout(function(){
       angular.element('#auto_complete_id').find('input').focus();
   },0);
}