83 lines
2.9 KiB
Markdown
83 lines
2.9 KiB
Markdown
# 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 |