Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

md-autocomplete pre-selected value #1779

Closed
oli107 opened this issue Mar 4, 2015 · 14 comments
Closed

md-autocomplete pre-selected value #1779

oli107 opened this issue Mar 4, 2015 · 14 comments
Milestone

Comments

@oli107
Copy link

oli107 commented Mar 4, 2015

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
Copy link

jojoyuji commented Mar 4, 2015

+1

3 similar comments
@jethroguce
Copy link

+1

@ACDN
Copy link

ACDN commented Mar 9, 2015

+1

@matthieuh
Copy link

+1

@ACDN
Copy link

ACDN commented Mar 10, 2015

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
Copy link
Author

oli107 commented Mar 10, 2015

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
Copy link

ACDN commented Mar 10, 2015

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

@oli107
Copy link
Author

oli107 commented Mar 10, 2015

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
Copy link

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
Copy link

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
Copy link
Author

oli107 commented Mar 12, 2015

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 notifications@github.com wrote:

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


{{item.display}}


Reply to this email directly or view it on GitHub
#1779 (comment).

@jethroguce
Copy link

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
Copy link
Contributor

👍

@brandonwbrown
Copy link

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?

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

10 participants