Multi-Value Input (Inputfeld mit Removable Tags / ähnlich CustomSelect)

[rainerroesingdb]

Description

Das Problem:
In unserem Filter benötigen wir die Möglichkeit z.B. eine Vielzahl Zugnummern oder Betriebsstellen einzugeben. Hierzu fehlt uns ein geeignetes und flexibles UI Pattern.

Die Lösung:
Ein Multi-Value Input, visuell angelehnt an die CustomSelect Komponente.

Beispiele Funktionsweise:
Der Nutzer gibt einen Zugnummer ein und drückt Enter. Die Eingabe wird in ein removable Tag umgewandelt. Kein Autocomplete und keine Validierung notwendig bzw. nicht sinnvoll

Der Nutzer gibt ein Betriebsstellenkürzel oder Langnamen ein, erhält nach X Ziffern Autocomplete-Vorschläge und muss daraus auswählen. Die Eingabe wird in ein removable Tag umgewandelt.

Eine Betriebsstellensuche mit Autocomplete liegt technisch bereits vor. siehe hier (Map -> Suchfunktion)
https://konstruktion-ui-ifp-int-next.ifp-iat.cnp-test.comp.db.de/zugliste/trassen

Beispiele MUI:
https://material.angular.dev/components/chips/examples#chips-autocomplete