first commit

AUTOCOMPLETE_FEATURE.md

@@ -0,0 +1,83 @@
+# SQL Autocomplete Funktionalität
+
+## Übersicht
+Die Query Builder Anwendung verfügt jetzt über eine intelligente Autocomplete-Funktion, die beim Schreiben von SQL-Queries automatisch Tabellenvorschläge anzeigt.
+
+## Funktionsweise
+
+### Aktivierung
+- Autocomplete wird automatisch ausgelöst, wenn im Query-Feld `FROM` getippt wird
+- Funktioniert auch bei partieller Eingabe nach `FROM` (z.B. `FROM US` zeigt alle Tabellen mit "US")
+
+### Bedienung
+
+#### Maus-Navigation
+- **Klicken** auf einen Tabellennamen übernimmt diesen in die Query
+- **Hover** über Items zeigt visuelles Feedback
+
+#### Tastatur-Navigation
+- **↓ / ↑** - Navigation durch die Vorschläge
+- **Enter / Tab** - Auswahl des markierten Tabellennamens
+- **Escape** - Schließt das Autocomplete-Dropdown
+
+### Intelligente Filterung
+- Zeigt maximal 10 relevante Tabellen
+- Filtert basierend auf bereits getipptem Text nach `FROM`
+- Case-insensitive Suche (Groß-/Kleinschreibung wird ignoriert)
+
+## Technische Details
+
+### UI-Komponenten
+- **Dropdown-Container**: Positioniert relativ zum Query-Textfeld
+- **Header**: "Verfügbare Tabellen" zur Orientierung
+- **Items**: Tabellennamen mit Icon und Hover-Effekten
+- **Keyboard-Navigation**: Visuelle Markierung des ausgewählten Items
+
+### CSS-Klassen
+```css
+.autocomplete-dropdown    /* Haupt-Container */
+.autocomplete-header      /* Header-Bereich */
+.autocomplete-item        /* Einzelne Tabellenvorschläge */
+.autocomplete-item.selected /* Keyboard-markiertes Item */
+```
+
+### JavaScript-Events
+- `input` - Erkennt Textänderungen und triggert Autocomplete
+- `keydown` - Behandelt Keyboard-Navigation
+- `click` - Schließt Dropdown bei Klick außerhalb
+
+## Beispiel-Usage
+
+### Basis-Verwendung
+1. Tippe im Query-Feld: `SELECT * FROM `
+2. Autocomplete-Dropdown erscheint automatisch
+3. Wähle eine Tabelle aus der Liste
+4. Tabelle wird automatisch eingefügt: `SELECT * FROM TABELLENAME `
+
+### Mit Filterung
+1. Tippe: `SELECT * FROM USER`
+2. Zeigt nur Tabellen die "USER" enthalten
+3. Auswahl übernimmt gefilterte Tabelle
+
+### Keyboard-Shortcuts
+- `FROM` + `↓` + `Enter` = Schnelle Tabellenauswahl
+- `FROM TAB` + `Tab` + `Enter` = Erste gefilterte Tabelle auswählen
+
+## Integration
+- **Nahtlose Integration** in bestehende Drag & Drop Funktionalität
+- **Keine Konflikte** mit anderen UI-Elementen
+- **Responsive Design** passt sich an verschiedene Bildschirmgrößen an
+- **Keyboard-freundlich** für Power-User
+
+## Performance
+- **Clientseitige Filterung** - Keine zusätzlichen Server-Requests
+- **Begrenzte Anzeige** auf 10 Items für schnelle Performance  
+- **Lazy Loading** - Dropdown erscheint nur bei Bedarf
+- **Auto-Hide** - Schließt automatisch bei Verlust des Fokus
+
+## Erweiterbarkeit
+Die Implementierung ist darauf vorbereitet für zukünftige Erweiterungen:
+- Spalten-Autocomplete (`SELECT col1, col2`)
+- Keyword-Autocomplete (`WHERE`, `ORDER BY`, etc.)
+- Funktionen-Autocomplete (`COUNT`, `SUM`, etc.)
+- Schema-übergreifende Suche