# 3. Existierende Auswahlkomponenten

Hier sind die Gegenüberstellungen der bereits vorhandenen Möglichkeiten zur Darstellung einer Optionsauswahl aufgelistet. Eine Gegenüberstellung der möglichen Funktionalitäten zeigt die Grenzen dieser Elemente auf. Dabei spielen die UI- sowie die Interaktionsunterschiede dieser Komponenten in verschiedenen Browsern eine tragende Rolle.

Als Basis dieser Arbeit dient das Country Select. Unter dem Country Select ist das Resultat der Vorarbeit zu verstehen. Weiter existieren bereits die Elemente Buttons bzw. Links, `select` und `datalist`. Die folgende Tabelle 3.1 zeigt einen Vergleich der genannten Möglichkeiten.



Tabelle 3.1: Vergleich der Auswahlmöglichkeiten

<table data-full-width="true"><thead><tr><th>Kriterien</th><th>Buttons</th><th>Select</th><th>Liste</th><th>Country Input</th></tr></thead><tbody><tr><td><strong>Optimale Anzahl  Elemente</strong></td><td>1 – 3</td><td>7 ± 2</td><td>70 ± 20</td><td>Ca. 250</td></tr><tr><td><strong>Alternativ-Name</strong></td><td>Links</td><td>Choice Input</td><td>Combo Box</td><td>Länderauswahl</td></tr><tr><td><strong>Falsche Auswahl</strong> </td><td>✗</td><td>✗</td><td>✓</td><td>✗</td></tr><tr><td><strong>Multi-Auswahl</strong></td><td>✓</td><td>✓</td><td>✗</td><td>✗</td></tr><tr><td><strong>Readonly</strong></td><td>✓</td><td>✗</td><td>✓</td><td>✗</td></tr><tr><td><strong>Disabled</strong></td><td>✓</td><td>✓</td><td>✓</td><td>✗</td></tr><tr><td><strong>Werte-Typ</strong></td><td>Skalar</td><td>Skalar</td><td>Skalar</td><td>Objekt</td></tr><tr><td><strong>Interaktions-möglichkeit</strong></td><td>sehr begrenzt</td><td>gut</td><td>gut</td><td>gut &#x26; konsistent</td></tr><tr><td><strong>Aktion bei Symbol-Eingabe</strong></td><td>keine</td><td>Suche <em><mark style="color:purple;">[2]</mark></em></td><td>Filter <em><mark style="color:purple;">[1]</mark></em></td><td>Suche <em><mark style="color:purple;">[2]</mark></em></td></tr><tr><td><strong>Merkmal</strong></td><td>direkter Überblick</td><td>fixe Optionen</td><td>Eingabehilfe</td><td>Speziell für Länderauswahl</td></tr><tr><td><strong>Anwendung</strong></td><td>Navigationslink, Formularbuttons</td><td>Formularfeld mit begrenzter Auswahl</td><td>Filterbare Liste, Suchergebnis</td><td>Länderauswahl im Formular</td></tr></tbody></table>

_<mark style="color:purple;">\[1]</mark>_ Filter: Liste verändern je nach Anzahl passender Werte\
&#xNAN;_<mark style="color:purple;">\[2]</mark>_ Suche: Liste unverändert; Erster zu der Eingabe passender Wert aus der Liste



Nebst den in der Tabelle aufgeführten Möglichkeiten existieren diverse Libraries und Frameworks. Viele dieser Lösungen für Auswahlkomponenten besitzen Abhängigkeiten zu weiteren Bibliothekskomponenten. Durch das Einbinden der Frameworks bläst sich der eigene Code extrem auf. Diese Auswahlkomponenten bieten eine Menge an Funktionen an, welche jedoch die Anwendung sehr komplex machen. Die Einarbeitung dauert lange. Da das Ziel dieses Projekts eine schlanke und einfach verwendbare Komponente ist, sind die existierenden Frameworks keine Lösung. Dieser Bericht legt keinen weiteren Fokus auf externe Bibliotheken.

