Search Input with Autocomplete

[marcysutton]

In addition to regular text inputs, Angular Material should include a search/filter option.

Visual cues for search include:

- Search icon (magnifying glass) - Close Button - Results panel

Accessibility requirements:

- `role="listbox"` landmark on a wrapping element - **Input element:** - `aria-label` or `` indicating specific purpose - `input type="search"` for mobile keyboard - `aria-autocomplete="list"` indicating results are displayed below ([doc](http://msdn.microsoft.com/en-us/library/windows/apps/hh968002.aspx)) - `aria-activedescendant="_selectedResultsChildId_"` indicating selected child item - `aria-haspopup="true"` on input indicating there is a results panel - `aria-expanded="true | false"` indicating whether results are open or closed - `aria-owns="_resultsPanelId_"` establishing semantic relationship between input and results pane - **Results panel (unordered list):** - Unique id on results pane - `role="presentation"` - **Child list items** - `role="option"` - unique id - **Live region** - `role="status"` on additional, visually hidden element for appending results text - `aria-atomic="true"` to force AT to read entire region as it updates - `aria-live="polite"` to read changes at the next graceful opportunity

Functional requirements:

- Arrow keys should allow user to cycle through list options - Tab key should blur field - Escape key should clear field - Close button should be operable from the keyboard

Related information:

- Material Design spec: [Text fields](http://www.google.com/design/spec/components/text-fields.html#text-fields-auto-complete-text-field) - YUI autocomplete docs: [Pattern](https://developer.yahoo.com/ypatterns/selection/autocomplete.html), [API](http://yuilibrary.com/yui/docs/autocomplete/) - [Accessible inline autocomplete example](http://test.cita.illinois.edu/aria/combobox/combobox2.php)

[nmabhinandan]

I'd love to have this!

[surabhi-batra]

I was looking for something similar! Any leads on this?

[ThomasBurleson]

As @naomiblack mentioned in our Forum, the great folks at LumApps are working with the Angular Material Core team. If your needs are immediate, you can use the http://ui.lumapps.com/directives/search-filter.

Much of that functionality [and more] will be implemented within the Angular Material mdSearch component; which is planned for Milestone 0.8 release.

[CICCIOSGAMINO]

Very cool, i'm interesting to use it, if you need a help to doing some work of for example documentations let me now ....

[robertmesserle]

Autocomplete is now in master

[buzzeante]

Is there any support for inline autocomplete alternatives included in the spec?

Great job btw