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

Could you please provide more info? For example your code would probably help. — Reins, Sep 13 '15 at 21:10

Mohit Adwani · Answer 1 · 2015-09-15T04:03:30.957

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);
}

edited Sep 15 '15 at 04:03

answered Sep 14 '15 at 04:49

Mohit Adwani

519
3
13

@Alex Sorry to know that. Is it focusing on the input box or not ? – Mohit Adwani Sep 15 '15 at 03:51
@Alex I have updated the code. I am using the same logic in my application. It works. Should work for you as well. If not try updating your libraries. – Mohit Adwani Sep 15 '15 at 04:04
This works for me, *if* I have not already focused the input before. If I click on the input, click out of it, then run this code, it doesn't work. If I just run this code it works. Any idea why? – user3413723 Oct 22 '16 at 16:02

score 1 · Answer 2 · answered Jul 29 '16 at 13:04

1

A simple modification to the autocompleteDirective and autocomepleteController to expose a directive attribute, something like md-focus and md-blur would allow consumer controllers to operate on those events

answered Jul 29 '16 at 13:04

naveen boda

11
2

score 0 · Answer 3 · answered Nov 05 '15 at 09:56

I know it's a late answer, but if someone should find this answer, the problem above is mainly one of selecting elements.

In the current example (given in the CodePen in the question) the whole thing seems to work if

angular.element('#testId').focus();

is changed to

document.querySelector('#testId').focus();

or even

document.getElementById('testId').focus();

This is due to limitations of jqLite, and (in my opinion) an assumption about jQuery style selector based lookups are available, instead of using the proper method when appropriate.

score 0 · Answer 4 · answered Jun 15 '16 at 05:40

0

You can achieve what you are seeking is by changing button click code to

var elem = angular.element( document.querySelector( '#testId' ) );
elem.focus();

minimal and straight to purpose.

Regards

answered Jun 15 '16 at 05:40

Hardik Vaghani

2,163
24
46

How can i open angular md-autocomplete programmatically?

4 Answers4