docs(autocomplete): add autocomplete docs #2840
Conversation
googlebot
added
the
cla: yes
kara
force-pushed
the
autocomplete-docs
branch
from
a15610a
to
24ad356
Compare
| ```ts | ||
| class MyComp { | ||
| myControl = new FormControl(); | ||
| options = [ |
There was a problem hiding this comment.
Use a real type here and get rid of any throughout? Maybe something like new User('Mary', 'Shelly')
| At this point, the autocomplete panel should be toggleable on focus and options should be selectable. But if we want | ||
| our options to filter when we type, we need to add a custom filter. | ||
|
|
||
| We already have access to the built-in `valueChanges` observable on the `FormControl`, so we can simply map the text |
There was a problem hiding this comment.
This feels a bit like you're saying "This is the One True Way to do filtering". What do you think of approaching more as "You can filter the options in any way you want based on the text input. Here's one example."
| the option's string properties. | ||
|
|
||
| To make this work, create a function on your component class that maps the control value to the desired display value. | ||
| Then bind it to the autocomplete's `displayWith` property. You'll probably also want to add a step to your |
There was a problem hiding this comment.
You probably also want to => You can
| } | ||
|
|
||
| displayFn(value: any): string { | ||
| return value && typeof value === 'object' ? value.name : value; |
| } | ||
|
|
||
| filter(val: string): any[] { | ||
| return this.options.filter(option => option.match(new RegExp(val, 'gi'))); |
There was a problem hiding this comment.
You typically don't want to use match when you are looking for a yes/no result.
http://stackoverflow.com/a/10940138/477102
kara
force-pushed
the
autocomplete-docs
branch
from
24ad356
to
f7b8f24
Compare
kara
force-pushed
the
autocomplete-docs
branch
from
f7b8f24
to
24d1559
Compare
|
@jelbourn Comments addressed |
jelbourn
added
pr: lgtm
action: merge
|
LGTM |
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Docs site example to come once examples live here.
r: @jelbourn @andrewseguin