New Component: Autocomplete

[telion2]

Vuetify provides a quite big component called v-autocomplete: https://vuetifyjs.com/en/components/autocompletes/ Basically it is a text-field combined with a dropdown-selection. The User enters some search term, and the autocomplete shows matching results. It also handles virtual loading (which means that if you have 1000 results only ~20 are actually rendered into the UI.) Please also note that the lists usually are not static and can change. E.g. say you have a country selector and a zip-Code selector. If you switch the country, the zip-codes of that country are loaded from the server, replacing the old list the zip-code Autocomplete was based on.

Also, note that the search results can be objects and not only Strings, meaning that if we take the example of zip-codes, you might have an object like this:

{
  zip: 71083
  place: Herrenberg
  long: 34.20302
  alt: 55.20033
}

meaning the user should be able to see the zip code, the related place and a link to google to directly see where that place is. I'm hinting that the search-results should be slotted, so one that add a search-result component that fits specific needs.

This component is quite important, as it provides a way for the user to find a value in a big list, which prevents invalid data entered.

This component is used quite often in our application but looks quite similar to the text-fields which are based on vueitfy as well. Thus we cannot switch to scale text-fields, as it risks design inconsistencies within our application.