VaAutocomplete component

[aluarius]

Ref: https://element-plus.org/en-US/component/autocomplete.html

Do some research on which of the implementation ways we want to take

• inline autocomplete (hints you text in input) vs dropdown suggestion (probably dropdown suggestion)
• separate component vs implementing on top of select (we though using select could be a better idea)

Potential complications

• Search select has a separate search field.

[aluarius]

Overview:

1. 90% of other implementations are related to dropdown suggestions list.
2. We can implement this via separate component (and reuse VaSelectOptionsList) or integrate it into VaSelect.

Other UI-kits:

1. Quasar - integrated into the select component. Always contains input but in non-autocomplete state it just has zero width. Design equal to the base select state.

2. Vuetify - extends select component, but still stays separate one. Design equal to the base select state.

3. AntDesign - separate component. Looks like regular input.

4. MUI - separate component, but no difference with select.

Features we want (may be):

1. Minimum entered chars amount to start suggestion logic to work (easy-peasy but useful sometimes - some sort of debounce).
2. Autofocus suggestion in the list.
3. Matches highlighting:

7. Async items (pretty widespread case, when you need to get autocomplete data from the api).
8. Mb we want to remove current VaSelect search field and change it to the autocomplete-like one. Or leave it for prop? But what will be the difference between VaSelect search and autocomplete?
9. Keyboard accessibility for autocomplete - almost all other implementations contains critical problems related to this (except MUI).
10. Auto grouping by alphabet.