3.3 Länderauswahl-Komponente

Alternativ zu den bekannten HTML-Elementen datalist und select existiert eine weitere, spezielle Auswahlkomponente. Die Länderauswahl [16] ist das Resultat des vorausgegangenen Projekts. Diese vereinfacht die Selektion eines Landes in einer vorgegebenen Liste. Die Komponente ist jedoch nur auf den spezifischen Anwendungsfall – die Wahl eines Landes – getestet. Das Design, die Funktionen und die Anwendung unterscheiden sich aber von den oben genannten HTML-Elementen.

3.3.1 Design

Die Länderauswahl erscheint moderner als die alten HTML-Elemente. Die Komponente ist in geschlossenem Zustand durch einen immer sichtbaren Container (Abbildung 3.10) visualisiert. Darin befindet sich das gewählte Land. Ist die Länderauswahl geöffnet, erscheint ergänzend ein Listencontainer mit allen Ländern (Abbildung 3.11). Der Aufbau zeigt sich in einem Spaltendesign – Kontinente links und Länder rechts.

Abbildung 3.10: Geschlossene Länderauswahl

Abbildung 3.11: Offene Länderauswahl

Das Design lässt sich einfacher und vielfältiger als bei den Standard-HTML-Elementen anpassen. Die einzelnen Subkomponenten besitzen Klassen, welche ein einfaches Umstyling ermöglichen. Funktionell zeigen sich sowohl Übereinstimmungen als auch Unterschiede.

3.3.2 Funktionen & Interaktionen

Ein grosser Unterschied findet sich in der Funktion des Kontinents. Durch die Selektion eines Kontinents reduzieren sich die zur Auswahl stehenden Länder. Ist kein spezifischer Kontinent ausgewählt, fällt die Selektion auf All. Die Komponente besitzt kein integriertes Formularfeld und benötigt deswegen in dieser Anwendung zusätzlichen Aufwand.

Die Länderauswahl bietet viele Interaktionen, welche sich bei den HTML-Elementen wiederfinden. Die folgende Tabelle 3.9 zeigt die Interaktionen, welche auf der Komponente implementiert sind.

Tabelle 3.9: Aktionen bei der Länderauswahl-Komponente

Kriterium	geschlossen	offen
↑ / ↓	↓: Liste öffnen	Kontinent: Selektion ändern Land: Highlight ändern
← / →	-	Highlight ändern
Buchstaben	Selektion auf Suchergebnis [1] ändern	Highlight auf Suchergebnis [1] ändern
Leerschlag	Liste öffnen	Selektion ändern
Backspace	Selektion löschen	Selektion löschen
Esc	-	Liste schliessen
Enter	Liste öffnen	Selektion änder
Tab	Input-Feld verlassen	Liste schliessen & Input-Feld verlassen
Scroll	Fenster Scrollen	Aussen: Liste bleibt offen Innen: Liste scrollen & Highlight ändern
Hover	-	Highlight ändern
Click	Liste öffnen	in Liste: Selektion ändern in Wertefeld: Liste schliessen

[*] Änderung der Selektion bewirkt Änderung des Highlights auf den selben Wert [*] Highlight und Cursor-Position besitzen selben Wert; kein Unterschied

[1] Suche: Erster mit dem eingegebenen Symbol passender Wert aus der Liste, wenn Eingabe nicht passend ⇒ keine Aktion; Liste unverändert; nach Pause / Debounce-Ablauf ⇒ neue Suche

In der Bedienung existieren keine Browser-Inkonsistenzen. Die Interaktionen lehnen mehr an denen des Selects als denen der Datalist an. Zudem betreffen die Änderungen in der Länder-Spalte nur das Highlight [17] und nicht die Selektion. Die Selektion benötigt eine Bestätigung mit Enter oder Space.

3.3.3 Anwendung

Diese Komponente benötigt in der Anwendung kein HTML. Die Einbindung findet via JavaScript statt. Der folgende Code 3.5 zeigt einen möglichen Anwendungsfall.

Code 3.5: Beispiel – Länderauswahl

const container = document.querySelector("#inputContainer");
if (null != container) {
    const countryList = [
        {
            country  : "Austria",
            continent: "Europe",
        },
        /* more country objects */
    ];
    const structureDetail = {
        value      : "",
        placeholder: "Choose a country",
        label      : "Country",
        name       : "country",
    };
    const structureMaster = {
        elementList   : countryList,
        sectionElement: { continent: "All" },
        focusObject   : {},
    };
    const detailController = ChoiceDetailController(structureDetail);
    const masterController = ChoiceMasterController("continent", "country")(structureMaster);
    const view = projectChoiceInput(detailController, masterController, "countryInput");
    container.append(...view);
}

Wie im Code 3.5 ersichtlich, sind mehrere Zeilen für die Erstellung der Komponente notwendig. Zudem befindet sich die Länderauswahl noch im experimentellen Status. Wie das Unterkapitel Future Features aus dem Bericht [18] der Vorarbeit beschreibt, gibt es noch Verbesserungspotenzial in der Implementation. Da diese Komponente noch nicht lange existiert, ist sie noch in keinem realen Anwendungsfall im Einsatz.

[16] (Marti und Burki, 2024) [17] Die Länderauswahl unterscheidet nicht zwischen Highlight und Cursor-Position. [18] (Marti und Burki, 2024)