You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The autocomplete is a normal text input enhanced by a panel of suggested options. You can read more about
3
-
autocompletes in the [Material Design spec](https://material.io/guidelines/components/text-fields.html#text-fields-auto-complete-text-field).
1
+
The autocomplete is a normal text input enhanced by a panel of suggested options.
2
+
You can read more about autocompletes in the [Material Design spec](https://material.io/guidelines/components/text-fields.html#text-fields-auto-complete-text-field).
4
3
5
4
### Simple autocomplete
6
5
7
-
Start by adding a regular `mdInput` to the page. Let's assume you're using the `formControl` directive from the
8
-
`@angular/forms` module to track the value of the input.
6
+
Start by adding a regular `mdInput` to the page. Let's assume you're using the `formControl`
7
+
directive from the `@angular/forms` module to track the value of the input.
9
8
10
9
*my-comp.html*
11
10
```html
@@ -14,10 +13,10 @@ Start by adding a regular `mdInput` to the page. Let's assume you're using the `
14
13
</md-form-field>
15
14
```
16
15
17
-
Next, create the autocomplete panel and the options displayed inside it. Each option should be defined by an
18
-
`md-option` tag. Set each option's value property to whatever you'd like the value of the text input to be
19
-
upon that option's selection.
20
-
16
+
Next, create the autocomplete panel and the options displayed inside it. Each option should be
17
+
defined by an `md-option` tag. Set each option's value property to whatever you'd like the value
18
+
of the text input to be upon that option's selection.
19
+
21
20
*my-comp.html*
22
21
```html
23
22
<md-autocomplete>
@@ -27,8 +26,9 @@ upon that option's selection.
27
26
</md-autocomplete>
28
27
```
29
28
30
-
Now we'll need to link the text input to its panel. We can do this by exporting the autocomplete panel instance into a
31
-
local template variable (here we called it "auto"), and binding that variable to the input's `mdAutocomplete` property.
29
+
Now we'll need to link the text input to its panel. We can do this by exporting the autocomplete
30
+
panel instance into a local template variable (here we called it "auto"), and binding that variable
31
+
to the input's `mdAutocomplete` property.
32
32
33
33
*my-comp.html*
34
34
```html
@@ -47,38 +47,51 @@ local template variable (here we called it "auto"), and binding that variable to
47
47
48
48
### Adding a custom filter
49
49
50
-
At this point, the autocomplete panel should be toggleable on focus and options should be selectable. But if we want
51
-
our options to filter when we type, we need to add a custom filter.
50
+
At this point, the autocomplete panel should be toggleable on focus and options should be
51
+
selectable. But if we want our options to filter when we type, we need to add a custom filter.
52
52
53
-
You can filter the options in any way you like based on the text input*. Here we will perform a simple string test on
54
-
the option value to see if it matches the input value, starting from the option's first letter. We already have access
55
-
to the built-in `valueChanges` observable on the `FormControl`, so we can simply map the text input's values to the
56
-
suggested options by passing them through this filter. The resulting observable (`filteredOptions`) can be added to the
53
+
You can filter the options in any way you like based on the text input*. Here we will perform a
54
+
simple string test on the option value to see if it matches the input value, starting from the
55
+
option's first letter. We already have access to the built-in `valueChanges` observable on the
56
+
`FormControl`, so we can simply map the text input's values to the suggested options by passing
57
+
them through this filter. The resulting observable (`filteredOptions`) can be added to the
57
58
template in place of the `options` property using the `async` pipe.
58
59
59
-
Below we are also priming our value change stream with `null` so that the options are filtered by that value on init
60
-
(before there are any value changes).
60
+
Below we are also priming our value change stream with `null` so that the options are filtered by
61
+
that value on init (before there are any value changes).
61
62
62
-
*For optimal accessibility, you may want to consider adding text guidance on the page to explain filter criteria.
63
-
This is especially helpful for screenreader users if you're using a non-standard filter that doesn't limit matches
64
-
to the beginning of the string.
63
+
*For optimal accessibility, you may want to consider adding text guidance on the page to explain
64
+
filter criteria. This is especially helpful for screenreader users if you're using a non-standard
65
+
filter that doesn't limit matches to the beginning of the string.
65
66
66
67
<!-- example(autocomplete-filter) -->
67
68
68
69
### Setting separate control and display values
69
70
70
-
If you want the option's control value (what is saved in the form) to be different than the option's display value
71
-
(what is displayed in the actual text field), you'll need to set the `displayWith` property on your autocomplete
72
-
element. A common use case for this might be if you want to save your data as an object, but display just one of
73
-
the option's string properties.
71
+
If you want the option's control value (what is saved in the form) to be different than the option's
72
+
display value (what is displayed in the actual text field), you'll need to set the `displayWith`
73
+
property on your autocomplete element. A common use case for this might be if you want to save your
74
+
data as an object, but display just one of the option's string properties.
74
75
75
-
To make this work, create a function on your component class that maps the control value to the desired display value.
76
-
Then bind it to the autocomplete's `displayWith` property.
76
+
To make this work, create a function on your component class that maps the control value to the
77
+
desired display value. Then bind it to the autocomplete's `displayWith` property.
77
78
78
79
<!-- example(autocomplete-display) -->
79
80
80
-
81
81
### Keyboard interaction
82
82
- <kbd>DOWN_ARROW</kbd>: Next option becomes active.
0 commit comments