QueryBuilder/AUTOCOMPLETE_FEATURE.md

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

.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