Skip to content

Commit 0ac6e18

Browse files
committed
docs(autocomplete): add guidance about filter criteria
1 parent 1bf1df7 commit 0ac6e18

File tree

1 file changed

+9
-5
lines changed

1 file changed

+9
-5
lines changed

src/lib/autocomplete/autocomplete.md

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -48,15 +48,19 @@ local template variable (here we called it "auto"), and binding that variable to
4848
At this point, the autocomplete panel should be toggleable on focus and options should be selectable. But if we want
4949
our options to filter when we type, we need to add a custom filter.
5050

51-
You can filter the options in any way you want based on the text input. Here we will do a simple string test on the
52-
input value to see if it matches the option value. We already have access to the built-in `valueChanges` observable on
53-
the `FormControl`, so we can simply map the text input's values to the suggested options by passing them through this
54-
filter. The resulting observable (`filteredOptions`) can be added to the template in place of the `options` property
55-
using the `async` pipe.
51+
You can filter the options in any way you like based on the text input*. Here we will perform a simple string test on
52+
the option value to see if it matches the input value, starting from the option's first letter. We already have access
53+
to the built-in `valueChanges` observable on the `FormControl`, so we can simply map the text input's values to the
54+
suggested options by passing them through this filter. The resulting observable (`filteredOptions`) can be added to the
55+
template in place of the `options` property using the `async` pipe.
5656

5757
Below we are also priming our value change stream with `null` so that the options are filtered by that value on init
5858
(before there are any value changes).
5959

60+
*For optimal accessibility, you may want to consider adding text guidance on the page to explain filter criteria.
61+
This is especially helpful for screenreader users if you're using a non-standard filter that doesn't limit matches
62+
to the beginning of the string.
63+
6064
*my-comp.ts*
6165
```ts
6266
class MyComp {

0 commit comments

Comments
 (0)