ng2-ui / auto-complete

Angular Auto Complete component and directive
https://ng2-ui.github.io/dist/#/auto-complete
MIT License
279 stars 122 forks source link

Implement an option to match user input ignoring accents #356

Closed gerardobot closed 6 years ago

gerardobot commented 6 years ago

Currently, auto-complete doesn't match the given source when it contains a character with a diacritic mark if the user forgets to include said mark (ie. an input of 'a' won't match 'á'). But most users don't tend to type accents, as they require two keystrokes as opposed to one. This means a user which inputs 'Krakow' won't find the existing entry for 'Kraków', which forces the developer to choose between a non grammatically correct source or finding a more complex solution.

With the ignore-accents option set to true, the filter function cleans accents from both strings before comparing, which ensures that the users gets a correct match even if they didn't include the diacritic mark.

I have updated the readme to include a brief description of the new option, and added a working example to the demo app.

almothafar commented 6 years ago

Thanks for PR, may you add this to changelog as well, please? anyway, I think this is good option to have by default if you sure about this is going to work we can make it a default behavior, I think most auto-complete things do that.

gerardobot commented 6 years ago

Actually, many autocompletes and autocomplete-like features (such as ng2-select or HTML5's datalist element) only offer a perfect match and don't include a much needed option to ignore accents. I've tested this solution several times and it works fine when dealing with unicode combining characters. For it to work, the code performs a double transformation of the strings to compare (normalize and a regex substituion) which don't seem to affect performance, though I have not checked if that stays true when working with very long sources (but I don't see why it shouldn't).

Anyway, I've made the behaviour default and updated the changelog, readme and demo example accordingly :)