Feature request: search/filter in select

[xuanshenbo]

Bug, feature request, or proposal:

Feature request

What is the expected behavior?

User able to search/filter the options in a select

What is the current behavior?

User must scroll the select to find the desired option

What is the use-case or motivation for changing an existing behavior?

When there is a long list of options, it's not easy to find an option

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Latest Angular Material as of 12 July 2017

Is there anything else we should know?

This is different from autocomplete, autocomplete is a free-text input field.

I haven't found anything in Material Design related to this, but this could be an important feature

[julianobrasil]

@xuanshenbo, have you try a function to validate selection of the md-autocomplete at the (blur) event? I know it's not exactly the user experience that you're looking for, but I think it's a nice workaround: https://plnkr.co/edit/HzJNtcNLdctAbfeHbWCs?p=preview

[jelbourn]

This is something we do plan on supporting eventually (similar to the md-select-header from AngularJS Material), but are still figuring out exactly how we want to implement it (the a11y is rather tricky).

[lightheaded]

This would be really useful, because currently md-select is veery poorly usable for long lists (e.g. country list) when compared to regular , because with the latter, you can hit the letter and jump to the items beginning with that letter. In md-select this is not an option and many developers are not willing to accept this as good UX in their applications :(

[nekkon]

Hey guys. Thanks for this great library of Material Components. Could you please add this feature in your roadmap? I believe it is important functionality, as most have already mentioned, and a must have in a long list. Also, it would be great if the filtering function could be defined by us (return true or false). @crisbeto @devversion @amcdnl @mmalerba @andrewseguin @jelbourn

[julianobrasil]

@nekkon, it looks like it'll be possible soon: #7835

[jrood]

Indeed #7835 would be the way to implement search/filtering. @crisbeto is waiting for feedback before merging, so please give your feedback there if you have any.

[kylecordes]

I have implemented this capability as a wrapper around mat-autocomplete - and as a base class that can easily be reused to make visual variations. Repository and demo link below.

https://github.com/OasisDigital/angular-material-obs-autocomplete

https://oasisdigital.github.io/angular-material-obs-autocomplete/

I am very interested in ideas in how I could reshape this work, in to the form of a component or similar thing to offer as a PR. Maybe the pair-of-functions that my solution uses, could be reshaped to something more like a mat-grid's DataSource ?

[macjohnny]

Here is an implementation using mat-select:
https://mat-select-search.stackblitz.io
Code: https://stackblitz.com/edit/mat-select-search?file=app%2Fmat-select-search%2Fmat-select-search.component.ts

See https://github.com/bithost-gmbh/ngx-mat-select-search

@jelbourn @crisbeto might this be worth filing as a PR once #2812 / #7835 is ready?

[eyalhakim]

@macjohnny this is great! However, it has a strange behavior when using the "multiple" attribute of the mat-select. When filtering and then selecting a value from the filtered list, it overrides and removes the previously selected values, which is not the desired behavior.

Other then that it's great!