md-autocomplete should be able to restrict the selection to one of the predefined choices

[kartGoogle]

The autocomplete component should have a mode where it doesn't accept arbitrary input. It forces the user to pick one of the predefined options, like a HTML select. But with the convenience of filtering, say if you have 200 items to pick from.

Example use case: a country chooser. I may prefer to type "Ind" to select "India", rather than going through a list of some 200 country names, but arbitrary input is not acceptable.

This can further be combined with a notion of optional, to have cases like:

• You can leave the field blank (decline to state my country), but if you do specify a country, it must be valid.
• you must specify a country, and it must be valid.

Feel free to close this bug if you think this doesn't belong in autocomplete, and clients should do validation themselves in JS.

[fabioginzel]

+1

[robertmesserle]

I believe this sounds closer to Select functionality, but with an added filter. There has been a lot of discussion over which functionality belongs to which components, and there is a fair amount of gray area between md-select and md-autocomplete.

@rschmukler Are there any issues opened for adding filtering to select?

[jgoux]

@robertmesserle A filter to the md-select component should be perfect for this purpose. I'm also missing this feature. Either we could have an option on md-autocomplete to show all the options without typing something or add a filter on md-select. But at the moment we doesn't have a component which displays all its options and provides filtering :)

[kartGoogle]

Does md-select support incremental loading, say if you have ten thousand
items? I thought it doesn't, which means that when we have an
md-autocomplete to have the user select from one of ten thousand items, we
still need to ensure that they have a valid selection.

So this feature request makes sense even if md-select supported filtering.

On 4 April 2015 at 01:07, Julien Goux notifications@github.com wrote:

@robertmesserle https://github.com/robertmesserle A filter to the
md-select component should be perfect for this purpose. I'm also missing
this feature. Either we could have an option on md-autocomplete to show all
the options without typing something or add a filter on md-select. But at
the moment we doesn't have a component which displays all its options
and provides filtering :)

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

.

[kartGoogle]

I filed #2327 to support filtering in mdSelect.

[Splaktar]

Filtering and multiple selection are needed in mdSelect via #2327. As @kartGoogle mentioned, it may be possible to implement this request for mdAutocomplete in custom JavaScript validators for many apps out there. It seems like mdAutocomplete already has the list of md-items so adding a check before accepting the input seems doable. The UX is a bit tricky though, do you throw away the entry (seems nasty) or keep it in edit mode (seems confusing to users)?

[stefan--]

+1

[bluebirdtech]

+1

[r0b-]

+1

[carlosafonso]

While this is implemented, for validation purposes I have solved this by using a hidden input attached to the actual model variable, then I set this hidden input as required. Although it's not perfect, It seems to do the trick:

<input type="hidden" ng-model="vm.actualModel" required/>
<md-autocomplete
    md-search-text="vm.query"
    md-selected-item-change="vm.onSelectedItem(item)"
    md-items="item in vm.filterItems(vm.query)">
<!-- -->
</md-autocomplete>

In the code above, both filterItems() and onSelectedItem() are in charge of setting the value of vm.actualModel.