Konfiguration
Standard-Konfiguration
Vollständige Referenz mit allen Optionen und Standardwerten:
const config = {
api: {
locationAutocomplete: "https://sv-luebeck.bc-testsystem.de/api/v1/ext-search",
timeout: 8000,
useMockData: false,
maxResults: 25,
debounceDelay: 1000,
},
search: {
baseUrl: "https://netzplan.swhl.de/initialize/journeys",
urlFormat: "path-segments",
additionalParams: { ld: "9644" },
via: { enabled: true, paramName: "via" },
products: { enabled: true, paramName: "p" },
},
ui: {
theme: "db-theme",
language: "de",
showDepartureTimeSelection: true,
defaultTimeMode: "departure",
},
labels: {
startPlaceholder: "Start",
destinationPlaceholder: "Ziel",
viaPlaceholder: "Zwischenstopp (optional)",
addViaLabel: "Zwischenstopp hinzufügen",
removeViaLabel: "Zwischenstopp entfernen",
searchButton: "Verbindung finden",
departureTime: "Abfahrt",
arrivalTime: "Ankunft",
changeTime: "ändern",
swapAriaLabel: "Start und Ziel umdrehen",
departureNow: "Jetzt",
currentLocation: "Aktueller Standort",
locatingUser: "Standort wird ermittelt...",
locationError: "Standort nicht verfügbar",
productsLabel: "Verkehrsmittel",
showMoreResults: "Weitere Ergebnisse anzeigen",
},
};
API-Optionen
| Option | Typ | Standard | Beschreibung |
|---|---|---|---|
locationAutocomplete |
string | — | Erforderlich. URL des Autocomplete-Endpunkts |
apiKey |
string | — | API-Schlüssel (wird als Header x-api-key gesendet) |
timeout |
number | 5000 | Request-Timeout in ms |
useMockData |
boolean | true | Mock-Daten statt echter API (für Tests) |
maxResults |
number | 25 | Anzahl der initial angezeigten Autocomplete-Ergebnisse |
debounceDelay |
number | 1000 | Verzögerung in ms, bevor ein Autocomplete-Request abgesetzt wird |
Mock-Daten & Fallback
useMockData: true— Für Tests ohne echte API; das Widget nutzt integrierte Demo-Daten.- Fallback — Bei API-Fehlern (Timeout, Netzwerkfehler) schaltet das Widget automatisch auf Mock-Daten um, damit es weiter nutzbar bleibt.
Such-Optionen
| Option | Typ | Beschreibung |
|---|---|---|
baseUrl |
string | Basis-URL für die Weiterleitung zur Fahrplanauskunft |
urlFormat |
string | "query-params" oder "path-segments" — siehe URL-Formate |
additionalParams |
object | Zusätzliche URL-Parameter (z.B. { ld: "9644" }) |
via |
object | Zwischenstopp-Konfiguration |
products |
object | Verkehrsmittel-Filter-Konfiguration |
GPS-Standort
Das Widget zeigt automatisch den aktuellen Standort als erste Option im Autocomplete. Die Texte sind über labels anpassbar:
{
"labels": {
"currentLocation": "Mein Standort",
"locatingUser": "Standort wird ermittelt...",
"locationError": "Standort nicht verfügbar"
}
}
Zwischenstopp (Via)
Nur Haltestellen
Als Zwischenstopp sind nur Haltestellen (type: "stop") erlaubt — keine Adressen oder POIs.
// Standard: aktiviert
{ search: { via: { enabled: true, paramName: "via" } } }
// Deaktivieren
{ search: { via: { enabled: false } } }
// Anderen Parameter-Namen (z.B. für Ihre Such-URL)
{ search: { via: { enabled: true, paramName: "intermediate" } } }
Anzahl der Suchergebnisse
Die API liefert alle Ergebnisse in einem Request (max. 30: bis zu 25 aus der Datenbank + 5 HERE-Adressen). Mit maxResults wird gesteuert, wie viele davon initial angezeigt werden. Gibt es mehr Ergebnisse als maxResults, erscheint der Button "Weitere Ergebnisse anzeigen" — ein Klick zeigt die restlichen Ergebnisse ohne erneuten API-Request.
// Standard: 25 Ergebnisse, Rest per Button nachladen (aus Cache)
{ api: { maxResults: 25 } }
// Alle Ergebnisse sofort anzeigen (kein Button)
{ api: { maxResults: 50 } }
// Button-Text anpassen
{ labels: { showMoreResults: "Mehr laden" } }
Debounce (Verzögerung der Suche)
Um die Anzahl der API-Requests (und damit externe Kosten für z.B. HERE-Adressen) zu reduzieren, wird die Suche erst nach einer konfigurierbaren Verzögerung ausgelöst.
// Standard: 1000ms (1 Sekunde) Verzögerung
{ api: { debounceDelay: 1000 } }
// Kürzere Verzögerung (z.B. 500ms)
{ api: { debounceDelay: 500 } }
Verkehrsmittel-Filter
// Standard: alle verfügbaren Verkehrsmittel
{ search: { products: { enabled: true, paramName: "p" } } }
// Nur bestimmte Verkehrsmittel anzeigen
{
search: {
products: {
enabled: true,
paramName: "p",
available: {
"SuburbanTrains": "S-Bahn",
"LightRail": "Straßenbahn",
"Bus": "Bus"
}
}
}
}
// Vollständig benutzerdefinierte Verkehrsmittel
{
search: {
products: {
enabled: true,
paramName: "transport",
available: {
"metro": "U-Bahn",
"tram": "Straßenbahn",
"bus": "Bus",
"ferry": "Fähre"
}
}
}
}
// Verkehrsmittel-Filter deaktivieren
{ search: { products: { enabled: false } } }
UI & Labels
Über ui und labels können Theme, Sprache und alle Texte angepasst werden. Details siehe Styling & Themes.
Zeitauswahl ausblenden
Wenn die Abfahrt/Ankunft-Zeitauswahl nicht benötigt wird: