epicmaxco / vuestic-ui

Vuestic UI is an open-source Vue 3 component library designed for rapid development, easy maintenance, and high accessibility. Maintained by Epicmax (@epicmaxco).
https://vuestic.dev
MIT License
3.46k stars 338 forks source link

`VaAutocomplete` component #2228

Closed aluarius closed 1 year ago

aluarius commented 2 years ago

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

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

Potential complications

aluarius commented 1 year ago

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.
image
  1. Vuetify - extends select component, but still stays separate one. Design equal to the base select state.
image
  1. AntDesign - separate component. Looks like regular input.
image
  1. MUI - separate component, but no difference with select.
image

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:
image
  1. Async items (pretty widespread case, when you need to get autocomplete data from the api).
  2. 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?
  3. Keyboard accessibility for autocomplete - almost all other implementations contains critical problems related to this (except MUI).
  4. Auto grouping by alphabet.