|
3 | 3 | Autocomplete dient dazu, Usern beim Ausfüllen von Texteingabefeldern durch Vorschläge zu unterstützen. Während der Eingabe werden relevante Optionen angezeigt, aus denen ausgewählt werden kann. Die Auswahl eines Vorschlags ist optional, User können auch eigene Eingaben vornehmen. Autocomplete wird typischerweise in Kombination mit Komponenten wie [TextField](/03-components/form-controls/text-field) oder [SearchField](/03-components/form-controls/search-field) eingesetzt.
|
4 | 4 |
|
5 | 5 | ## Best practices
|
6 |
| -Achte bei der Verwendung einer Autocomplete darauf, dass… |
7 |
| -* die Vorschläge kontextbezogen und für die Aufgabe relevant sind. |
8 |
| -* die Vorschlagsliste bei Bedarf sinnvoll vorgefiltert werden kann (z. B. anhand von Kategorien oder Kontext) |
| 6 | +Achte bei der Verwendung von Autocomplete darauf, dass… |
| 7 | +* die Vorschläge kontextbezogen sind. |
| 8 | +* die Vorschlagsliste bei Bedarf sinnvoll vorgefiltert werden kann (z. B. anhand von Kategorien oder Kontext). |
9 | 9 | * bei leerem Eingabefeld zunächst keine Vorschläge angezeigt werden, sofern keine initialen Werte erforderlich sind.
|
10 | 10 |
|
11 | 11 |
|
12 | 12 | ## Verwendung
|
13 |
| -Verwende eine Autocomplete, um… |
14 |
| -* die Effizienz bei der Dateneingabe zu verbessern, insbesondere bei bekannten oder häufig genutzten Werten. |
| 13 | +Verwende ein Autocomplete, um… |
| 14 | +* die Effizienz bei der Dateneingabe zu verbessern, insbesondere bei bekannten oder häufig genutzten Optionen. |
15 | 15 | * Tippfehler zu vermeiden und die Datenqualität zu erhöhen.
|
16 | 16 | * lange Auswahlmenüs zu vermeiden, indem Vorschläge dynamisch gefiltert werden.
|
17 | 17 |
|
18 |
| -## Autocomplete vs. Combobox |
| 18 | +## Autocomplete vs. ComboBox |
19 | 19 |
|
20 | 20 | Autocomplete und [Comboboxen](/03-components/form-controls/combo-box) sehen oft ähnlich aus, erfüllen aber unterschiedliche Zwecke.
|
21 | 21 | <DoAndDont>
|
22 | 22 | <Plain heading="Verwende Autocomplete, um z. B. …">
|
23 |
| -- Benutzern zu ermöglichen, freie Eingaben zu machen, während Vorschläge zur Auswahl angezeigt werden. |
24 |
| -- bei langen oder dynamischen Datenlisten (z. B. Städte, Benutzernamen, Tags). |
25 |
| -- wenn nicht zwingend ein vorgeschlagener Wert ausgewählt werden muss. |
| 23 | +- Usern zu ermöglichen, freie Eingaben zu machen, während Vorschläge zur Auswahl angezeigt werden. |
| 24 | +- bei langen oder dynamischen Datenlisten (z. B. Städte, Usernamen, Tags). |
26 | 25 | </Plain>
|
27 | 26 |
|
28 |
| -<Plain heading="Verwende Combobox, um z. B. …"> |
| 27 | +<Plain heading="Verwende ComboBox, um z. B. …"> |
29 | 28 | - aus einer vordefinierten Liste von Optionen eine Auswahl zu treffen.
|
30 |
| -- wenn der User entweder auswählen oder eingeben können soll. |
31 |
| -- bei bekannten, überschaubaren Werten (z. B. Sprachen, Kategorien, Geschlecht). |
| 29 | +- bei bekannten, überschaubaren Optionen (z. B. Sprachen, Kategorien, Geschlecht). |
32 | 30 | </Plain>
|
33 | 31 | </DoAndDont>
|
0 commit comments