docs: Add docs for Autocomplete (#1727)

* docs: autocomplete

* update autocomplete vs. combobox guidelines.mdx

* Changes after Review on guidelines.mdx

* Changes after Review on overview.mdx

* small fixes guidelines.mdx

Author: Jan-Eimertenbrink

apps/docs/src/content/03-components/form-controls/autocomplete/guidelines.mdx

@@ -0,0 +1,31 @@
+# Grundlagen
+
+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.
+
+## Best practices
+Achte bei der Verwendung von Autocomplete darauf, dass…
+* die Vorschläge kontextbezogen sind.
+* die Vorschlagsliste bei Bedarf sinnvoll vorgefiltert werden kann (z. B. anhand von Kategorien oder Kontext).
+* bei leerem Eingabefeld zunächst keine Vorschläge angezeigt werden.
+
+
+## Verwendung
+Verwende ein Autocomplete, um…
+* die Effizienz bei der Dateneingabe zu verbessern, insbesondere bei bekannten oder häufig genutzten Optionen.
+* Tippfehler zu vermeiden und die Datenqualität zu erhöhen.
+* lange Auswahlmenüs zu vermeiden, indem Vorschläge dynamisch gefiltert werden.
+
+## Autocomplete vs. ComboBox
+
+Autocomplete und [ComboBoxen](/03-components/form-controls/combo-box) sehen oft ähnlich aus, erfüllen aber unterschiedliche Zwecke.
+<DoAndDont> 
+<Plain heading="Verwende Autocomplete, um z. B. …"> 
+- Usern zu ermöglichen, freie Eingaben zu machen, während Vorschläge zur Auswahl angezeigt werden. 
+- bei langen oder dynamischen Datenlisten (z. B. Städte, Usernamen, Tags). 
+</Plain>
+
+<Plain heading="Verwende ComboBox, um z. B. …"> 
+- aus einer vordefinierten Liste von Optionen eine Auswahl zu treffen.
+- bei bekannten, überschaubaren Optionen (z. B. Sprachen, Kategorien, Geschlecht).
+</Plain>
+</DoAndDont>

apps/docs/src/content/03-components/form-controls/autocomplete/index.mdx

@@ -1,8 +1,7 @@
 ---
 component: Autocomplete
 description:
-  Die Autocomplete-Komponente unterstützt Nutzer:innen beim ausfüllen von
-  Eingabefeldern. Es werden passende Optionen während der Eingabe vorgeschlagen.
+  Autocomplete unterstützt bei der Texteingabe durch kontextbezogene Vorschläge. Die Auswahl ist optional, eigene Eingaben bleiben möglich. Typischerweise wird die Komponente mit TextField oder SearchField kombiniert.
 ---
 
 <LiveCodeEditor editorDisabled />

apps/docs/src/content/03-components/form-controls/autocomplete/overview.mdx

@@ -1,21 +1,29 @@
 # Playground
 
+Lege `<Autocomplete />`, um ein [TextField](/03-components/form-controls/text-field) oder ein [SearchField](/03-components/form-controls/search-field), um Texteigaben mit Vorschlägen zu unterstützen.
+
 <LiveCodeEditor />
 
 ---
 
 # Benutzerdefinierte Filter
 
-<LiveCodeEditor example="filter" />
+Schränke die Optionen, die dem User zur Auswahl stehen mithilfe von Filtern ein.
+
+<LiveCodeEditor example="filter" editorCollapsed />
 
 ---
 
 # Kombiniere mit ...
 
 ## SearchField
 
+Nutze `<Autocomplete />` mit einem [SerachField](/03-components/form-controls/search-field), um die User beim Suchen mit Vorschlägen zu unterstützen.
+
 <LiveCodeEditor example="search" editorCollapsed />
 
 ## React Hook Form
 
+Weitere Details zur Formularlogik und -validierung sind in der Component [Form (React Hook Form)](/03-components/form-controls/form-react-hook-form) zu finden.
+
 <LiveCodeEditor example="form" editorCollapsed />