# 3.3 Länderauswahl-Komponente

## 3.3 Länderauswahl-Komponente

Alternativ zu den bekannten HTML-Elementen `datalist` und `select` existiert eine weitere, spezielle Auswahlkomponente. Die Länderauswahl _<mark style="color:purple;">\[16]</mark>_ 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.

<figure><img src="https://992617930-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6gG3ZwRamlY91jTcyxr6%2Fuploads%2FmRAJT4JOY7O27YJal8cM%2FcountryInput-close.png?alt=media&#x26;token=3a59fda4-ae46-46bf-ad47-d5144c2d87b7" alt="" width="563"><figcaption><p>Abbildung 3.10: Geschlossene Länderauswahl</p></figcaption></figure>

<figure><img src="https://992617930-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6gG3ZwRamlY91jTcyxr6%2Fuploads%2FqtKxlfgZPtvvoyth27KD%2FcountryInput-open.png?alt=media&#x26;token=c864ae2e-41d7-4afe-a7df-de0e29e1ecc8" alt="" width="563"><figcaption><p>Abbildung 3.11: Offene Länderauswahl</p></figcaption></figure>

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

<table data-full-width="true"><thead><tr><th>Kriterium</th><th>geschlossen</th><th>offen</th></tr></thead><tbody><tr><td><strong>↑ / ↓</strong></td><td><strong>↓</strong>: Liste öffnen</td><td><em>Kontinent</em>: Selektion ändern<br><em>Land</em>: Highlight ändern</td></tr><tr><td><strong>← / →</strong></td><td>-</td><td>Highlight ändern</td></tr><tr><td><strong>Buchstaben</strong></td><td>Selektion auf Suchergebnis <em><mark style="color:purple;">[1]</mark></em> ändern</td><td>Highlight auf Suchergebnis <em><mark style="color:purple;">[1]</mark></em> ändern</td></tr><tr><td><strong>Leerschlag</strong></td><td>Liste öffnen</td><td>Selektion ändern</td></tr><tr><td><strong>Backspace</strong></td><td>Selektion löschen</td><td>Selektion löschen</td></tr><tr><td><strong>Esc</strong></td><td>-</td><td>Liste schliessen</td></tr><tr><td><strong>Enter</strong></td><td>Liste öffnen</td><td>Selektion änder</td></tr><tr><td><strong>Tab</strong></td><td>Input-Feld verlassen</td><td>Liste schliessen  &#x26; Input-Feld verlassen</td></tr><tr><td><strong>Scroll</strong></td><td>Fenster Scrollen </td><td><em>Aussen</em>: Liste bleibt offen <br><em>Innen</em>: Liste scrollen &#x26; Highlight ändern</td></tr><tr><td><strong>Hover</strong></td><td>-</td><td>Highlight ändern</td></tr><tr><td><strong>Click</strong></td><td>Liste öffnen</td><td><em>in Liste</em>: Selektion ändern <br><em>in Wertefeld</em>: Liste schliessen</td></tr></tbody></table>

_<mark style="color:purple;">\[\*]</mark>_ Änderung der Selektion bewirkt Änderung des Highlights auf den selben Wert\
&#xNAN;_<mark style="color:purple;">\[\*]</mark>_ Highlight und Cursor-Position besitzen selben Wert; kein Unterschied

_<mark style="color:purple;">\[1]</mark>_ 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 _<mark style="color:purple;">\[17]</mark>_ 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 title="Code 3.5: Beispiel – Länderauswahl" lineNumbers="true" %}
```javascript
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);
}
```
{% endcode %}

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 _<mark style="color:purple;">\[18]</mark>_ 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.



_<mark style="color:purple;">\[16]</mark>_ [(Marti und Burki, 2024)](../verzeichnisse/quellenverzeichnis)\
&#xNAN;_<mark style="color:purple;">\[17]</mark>_ Die Länderauswahl unterscheidet nicht zwischen Highlight und Cursor-Position.\
&#xNAN;_<mark style="color:purple;">\[18]</mark>_ [(Marti und Burki, 2024)](../verzeichnisse/quellenverzeichnis)

