Material: md-autocomplete pre-selected value

[oli107]

I want to pre-fill the autocomplete value (use cases = editing an existing value or retaining state on refresh). However, simply changing the model to the pre-selected item does not work as it leaves the dropdown of options visible even if the autocomplete is not in focus. Is there a way to disable the dropdown if a valid entry is already selected and the input is not focused?

[jojoyuji]

+1

[jethroguce]

+1

[ACDN]

+1

[matthieuh]

+1

[ACDN]

A quick review of the controller source reveals a watcher on searchText

 $scope.$watch('searchText', wait
          ? $mdUtil.debounce(handleSearchText, wait)
          : handleSearchText);
}

This allows us to set the search text in our controller while loading the state.

 //Populate the searchText property on the object bound to the md-search-text attribute in md-autocomplete
 vm.autoComplete.searchText = preSelectedText;

And just like that, you can set a pre-selected value;

[oli107]

Whilst that is correct to set the text-field to the selected text, it does perform the same function as selecting an item from the list. Specifically it still leaves the selection box open.

[ACDN]

It shouldn't if there is only one result. It is working perfectly for me.

[oli107]

See this codepen:
http://codepen.io/anon/pen/XJxmmE
It appears to be related to two problems, first that it is case sensitive (as can be seen in this example), and secondly issue 1781 that it will not select if there is another value with additional characters.

[ericodes]

What if you wanted to tab and then pre-fill the autocomplete with a specific value? Would you want to populate the searchText property on the object bound to the md-search-text attribute in md-autocomplete or the selectedItem property?

[jethroguce]

doing an ng-init for the preselected value works for me.

<md-autocomplete
  ng-disabled="ctrl.isDisabled"
  md-no-cache="ctrl.noCache"
  md-selected-item="ctrl.selectedItem"
  md-search-text="ctrl.searchText"
  md-items="item in ctrl.querySearch(ctrl.searchText)"
  md-item-text="item.display"
  placeholder="What is your favorite US state?"
  ng-init="ctrl.searchText=ctrl.selectedItem.display">
  <span md-highlight-text="ctrl.searchText">{{item.display}}</span>
</md-autocomplete>

[oli107]

I do not understand this as a solution, it seems no different to
pre-filling the searchText within the controller? Can you fork the codepen
to demonstrate?

On 12 March 2015 at 14:28, Jethro Guce [email protected] wrote:

doing an ng-init for the preselected value works for me.

ng-disabled="ctrl.isDisabled"
md-no-cache="ctrl.noCache"
md-selected-item="ctrl.selectedItem"
md-search-text="ctrl.searchText"
md-items="item in ctrl.querySearch(ctrl.searchText)"
md-item-text="item.display"
placeholder="What is your favorite US state?"
ng-init="ctrl.selectedItem.display=ctrl.searchText">
{{item.display}}

—
Reply to this email directly or view it on GitHub
https://github.com/angular/material/issues/1779#issuecomment-78489630.

[jethroguce]

like @ACDN, mine has only single result. I don't get it why it won't work on yours, even if I have removed the 'Alabama2', it the drop box is still open.

[david-gang]

:+1:

[brandonwbrown]

this works for me, but only if i then manually click on the field after page load does the selectedItemChange fire and the preset fills. any ideas on how to trigger it without the click?