fix(autocomplete example): regex metacharacter escape

[girtsernstsons]

autocomplete material example fails if regex metacharacters (ie *) are provided. Fixed by adding escapeSpecChars function

[girtsernstsons]

Plunker example

[jelbourn]

I think a cleaner solution would be to just not use a regex at all and instead just use indexOf

[girtsernstsons]

Thanks for the hint. Decided to use includes instead of indexOf

[willshowell]

Related #4440 (comment)

[jelbourn]

includes is not supported in IE11 (which we still support). We try to avoid requiring polyfills where possible

[willshowell]

@jelbourn Per your suggestion to switch to indexOf, I believe the regex filter was put in place for a11y reasons

#3373, #4440

[jelbourn]

@willshowell good point; it should be specifically indexOf(...) === 0

[girtsernstsons]

@jelbourn @willshowell how about adding a toggle "Search from beginning" in the example which would switch between indexOf===0 and indexOf>-1? IMHO it would provide a broader use case to developers.

[jelbourn]

It's just an example- I think the indexOf === 0 is sufficient

[girtsernstsons]

@jelbourn ok, fixed with indexOf === 0

[jelbourn]

LGTM

[rafaelss95]

I know it's just an example, but with this change it behaves in a different way:

Before:

When "a" is typed it shows "Alabama", "Alaska", "Arizona", "Arkansas"

Now:

When "a" is typed it shows simply nothing, because indexOf is case sensitive.

Also, I think it should matches the whole string... example:

If I type "k" it should match Arkansas, for example.

So, to make it work in the cases described above, I'd suggest to change it to:

return val ? this.states.filter(s => s.toLowerCase().indexOf(val.toLowerCase()) !== -1)

PLUNKER

@jelbourn

[girtsernstsons]

@rafaelss95
Fix already handles case sensitivity in the same way you've proposed - aafa6b0.
The reason, why indexOf(...) === 0 is more preferable over indexOf(...) !== -1, can be found here #3373

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}