ym.modules.autoComplete V5
Falls Sie die alte Autocomplete Version 3 benutzen, klicken Sie hier. Wenn Sie auf die aktuelle Version wechseln wollen, finden Sie hier eine Migrationsanleitung.
Initialisierung
So initialisieren Sie die Autocomplete-Komponente:
Codebeispiel: Initialisierung Autovervollständigung
// Übergebe Version AutoComplete
ym.ready({ autocomplete: 5 }, function (modules) {
// Erzeuge die Klasse direkt.
var autocomplete1 = new ym.modules.AutoComplete('#autocomplete1',
{
onSelected: function (geoJson) {
geocoder.geocode(geoJson.properties.location);
}
});
// Verwende die Factory, um die Instanz zu erzeugen.
var autocomplete2 = ym.modules.autoComplete('#autocomplete2',
{
onSelected: function (geoJson) {
geocoder.geocode(geoJson.properties.location);
}
});
});
Constructor(selector, settings)
Parameter: selector
Im Feld des Selektors kann ein CSS3-Selektor übergeben werden, der auf das Eingabefeld für das Autocomplete verweist.
Parameter: settings
Die übergebenen Parameter können nachträglich angepasst werden, indem man auf dem Autocomplete Objekt auf die Variable options zugreift und die einzelnen Variablen ändert. Bei der nächsten Suche werden dann die geänderten Parameter benutzt.
| Name | Beschreibung | Datentyp | Standardwert |
|---|---|---|---|
className |
Fügt dem Autocomplete-Container eine CSS-Klasse hinzu. | string |
"" |
isoCountries |
Die Länder, in denen gesucht werden soll: Es wird ein Array mit beliebig vielen Ländercodes nach ISO-3166-2 übergeben. Wird der Parameter nicht übergeben, wird in allen unterstützten Ländern gesucht. (Muss kleingeschrieben werden) | string[] |
[] |
isoLanguages |
Definiert die Lokalisierungen, die zurückgeben werden soll: Es wird ein Array mit beliebig vielen Ländercodes nach ISO-3166-2 übergeben. Nur das erste Element wird beachtet. | string[] |
[] |
radius |
Beschränkt das Suchgebiet auf einen Radius in m. Die Koordinate von dem Mittelpunkt kann mit der Methode setCenter(latlng) festgelegt werden. | number |
0 |
positionIsFixed |
Beeinflusst, wenn die SmartMaps mit dem Autocomplete über die Methode .setMap(map) verknüpft wurde. Standardmäßig wird im aktuellen Kartenauschnitt gesucht. Wenn immer im Initialen Kartenauschnitt gesucht werden soll, muss der Wert auf true gesetzt werden. | boolean |
false |
suggestionItemAlign |
Ermöglicht das Erzwingen, dass die Ergebnisliste in eine Zeile (rows) geschrieben wird oder in eine zweispaltige Spalte (columns). Bei auto wird ab einer Breite von 320px automatisch zu einer Zeile (rows) gewechselt. | "rows", "columns" oder "auto" |
"auto" |
showCountry |
Zeigt den Ländernamen in der Vorschlagsliste an, falls vorhanden. | boolean |
true |
showState |
Zeigt das Bundesland oder Staat in der Vorschlagsliste an, falls vorhanden. | boolean |
false |
showCounty |
Zeigt den Landkreis in der Vorschlagsliste an, falls vorhanden. | boolean |
false |
showDistrict |
Zeigt die Verwaltungsregion in der Vorschlagsliste an, falls vorhanden. | boolean |
false |
showZip |
Zeigt die Postleitzahl in der Vorschlagsliste an, falls vorhanden. | boolean |
true |
showVillage |
Zeigt die Dorfgemeinde in der Vorschlagsliste an, falls vorhanden. | boolean |
false |
showCityPart |
Zeigt den Stadtteil in der Vorschlagsliste an, falls vorhanden. | boolean |
false |
showNeighborhood |
Zeigt die Wohnsiedlung in der Vorschlagsliste an, falls vorhanden. | boolean |
false |
showStreet |
Zeigt die Straße in der Vorschlagsliste an, falls vorhanden. | boolean |
true |
showPoi |
Zeigt den Ort von Interesse in der Vorschlagsliste an, falls vorhanden. | boolean |
true |
proximityBoost |
Der proximityBoost gewichtet die Ergebnisliste nach einer Geokoordinate und einem Radius. Die Geokoordinate kann aus der Karteninstanz mit setMap(map) oder durch eine Koordinate mit setCenter(latlng) übernommen werden. Je höher der Wert value im Proximity-Boost ist, je mehr werden Ergebnisse im Radius bevorzugt. | {
enable?: boolean;
value?: number;
radius?: number;
} |
{ enable: false, value: 1} |
boundingBoxBoost |
Der BoundingBoxBoost gewichtet die Ergebnisliste durch ein Rechteck. Das Begrenzungsrechteck kann mit setMap(map) aus der Karteninstanz oder mit setBounds(latlng) aus einem Rechteck übernommen werden. Je höher der Wert in boundingBoxBoost ist,je mehr werden Ergebnisse im Rechteck bevorzugt. | {
enable?: boolean;
value?: number;
} |
{ enable: false, value: 1 } |
inBoundingBox |
Zeigt nur Ergebnisse, die in dem Rechteck liegen, die beim Parameter boundingBoxBoost festgelegt wurden. | boolean |
false |
searchZip |
Erlaubt das Suchen von Postleitzahlen | boolean |
false |
pins |
Erlaubt das Festlegen von den Icons in der Ergebnisliste. | Array<{
html: string;
type?: 'UNDEFINED'
| 'AIRPORT'
| 'CITY'
| 'CITY_WITH_ZIP'
| 'CITYPART'
| 'CITYPART_WITH_ZIP'
| 'COUNTY'
| 'COUNTRY'
| 'DISTRICT'
| 'NEIGHBOURHOOD'
| 'STATE'
| 'STREET'
| 'STREET_WITHOUT_CITY'
| 'TRAIN_STATION'
| 'ZIP'
| 'ISLAND'
| 'VILLAGE'
| 'ATTRACTION';
width?: number;
height?: number;
color?: string;
}> |
[
{
html: ' |
includeFilters |
Die Eigenschaften, die auf True gesetzt sind, erzwingen, dass nur Ergebnisse zurückgegeben werden, die den entsprechenden Feldern entsprechen. | {
airport?: boolean;
attraction?: boolean;
city?: boolean;
citypart?: boolean;
county?: boolean;
country?: boolean;
district?: boolean;
island?: boolean;
neighborhood?: boolean;
state?: boolean;
street?: boolean;
streetWithoutCity?: boolean;
trainstation?: boolean;
village?: boolean;
zip?: boolean;
zipCity?: boolean;
zipCitypart?: boolean;
} |
[] |
excludeFilters |
Die Eigenschaften, die auf True gesetzt sind, erzwingen, dass nur Ergebnisse zurückgegeben werden, die den entsprechenden Feldern nicht entsprechen. | {
airport?: boolean;
attraction?: boolean;
city?: boolean;
citypart?: boolean;
county?: boolean;
country?: boolean;
district?: boolean;
island?: boolean;
neighborhood?: boolean;
state?: boolean;
street?: boolean;
streetWithoutCity?: boolean;
trainstation?: boolean;
village?: boolean;
zip?: boolean;
zipCity?: boolean;
zipCitypart?: boolean;
} |
[] |
Methoden
update()
Löst eine neue Suchanfrage aus und öffnet anschließend die Ergebnisliste.
updateMap()
Aktualisiert die Bounding Box der Karte und erzwingt die Neuberechnung von Zentrum und Radius.
fetch(query: string)
Holt sich die Ergebnisliste und gibt diese als GeoJSON zurück.
open()
Wenn Vorschläge vorhanden sind, wird die Ergebnisliste sofort geöffnet.
close()
Schließt die Vorschlagsliste sofort.
setMap(map: ym.Map)
Registriert eine Karte für die Suche des Autocomplete. Wenn die Karte im Autocomplete registriert ist, wird für die Suche automatisch das Rechteck des Kartenausschnitts als Suchbereich verwendet.
removeMap()
Entfernt die registrierte Karte aus der Suche des Autocomplete. Durch das Entfernen der Karte gibt es keine örtliche Eingrenzung mehr.
setCenter(latlng: ym.LatLng, radius?: number)
Definiert einen Suchbereich mit Hilfe des in den Optionen gesetzten Radius, in dem die Suchanfrage ausgeführt werden soll.
getCenter()
Falls vorhanden, wird ein LatLng-Objekt zurückgeliefert, welches den Mittelpunkt des Suchrechtecks definiert. Falls kein Suchrechteck definiert ist, wird undefined zurückgegeben.
setBounds(latlngBounds: ym.LatLngBounds)
Definiert einen Suchbereich anhand eines Suchrechtecks.
getBounds()
Falls vorhanden, wird ein LatLngBounds-Objekt zurückgeliefert, welches das Suchrechteck definiert. Falls kein Suchrechteck definiert ist, wird undefined zurückgeliefert.
whenReady()
Argument: onReady: (error?: Error) => void
Führt ein onReady-Callback aus, nachdem die Autocomplete-Komponente bereit ist.
Return: Promise
Return: Promise
Events
| Name | Beschreibung | Datentyp |
|---|---|---|
ready |
Das Event ready wird aufgerufen, wenn das Autocomplete initialisiert wurde. |
event |
suggestion(geoJson, addresses, query) |
Das Event wird ausgelöst, nachdem die Autovervollständigung eine Liste mit Ergebnissen vom Webdienst erhalten hat. Im Event kann ein GeoJson , eine Adressliste und die Suchanfrage verarbeitet werden. | event |
empty(query) |
Falls gar keine Treffer über das Autocomplete ermittelt werden konnte, wird onEmpty aufgerufen. Hier wird nur die Suchanfrage wieder
zurückgeliefert. |
event |
selected(geoJson, address, query) |
Die Auswahl eines Treffers in der Autocomplete-Vorschlagsliste löst onSelected aus. Sie erhält eine GeoJson, eine Adressliste und die Suchanfrage. |
event |
error(error) |
Falls ein serverseitiges Problem oder ein Problem mit der Datenverbindung besteht, wird dieses Ereignis ausgelöst. | event |
CSS-Variablen
Das Design von Autocomplete lässt sich über CSS-Variablen konfigurieren. Dafür müssen diese in der :root pseudo-class, definiert werden. Wird nicht vom Internet-Explorer unterstützt.
| Name | Beschreibung | Datentyp | Standardwert |
|---|---|---|---|
--smartmaps-text-color |
Definiert die Text- und Icon-Farbe des Eingabefeldes und Ergebnisliste. | CSS-Color |
#707070 |
--smartmaps-input-bg-color |
Definiert die Hintergrundfarbe des Eingabefeldes. | CSS-Color |
#ffffff |
--smartmaps-suggestion-bg |
Definiert die Hintergrundfarbe der Ergebnisliste. | CSS-Color |
#ffffff |
--smartmaps-suggestion-hover-bg |
Definiert die Hintergrundfarbe eines Ergebnisses in der Ergebnisliste, wenn mit der Maus darüber gefahren wird. | CSS-Color |
#ebebeb |
--smartmaps-suggestion-hover-fg |
Definiert die Text- und Iconfarbe eines Ergebnisses in der Ergebnisliste, wenn mit der Maus darüber gefahren wird. | CSS-Color |
#707070 |
--smartmaps-mark-bg |
Definiert die Hintergrundfarbe der Hervorhebung der Übereinstimmung mit dem Suchstring innerhalb der Ergebnisliste. | CSS-Color |
transparent |
--smartmaps-mark-hover-bg |
Definiert die Hintergrundfarbe der Hervorhebung der Übereinstimmung mit dem Suchstring innerhalb der Ergebnisliste, wenn mit der Maus darüber gefahren. | CSS-Color |
transparent |
--smartmaps-border |
Definiert die Umrandung des Eingabefeldes und der Ergebnisliste. | CSS-Border |
1px solid rgba(0, 0, 0, 0.2) |
--smartmaps-boxshadow |
Definiert den Schatten des Eingabefeldes und der Ergebnisliste. | CSS-Box-Shadow |
0 5px 10px rgba(0, 0, 0, 0.2) |
--smartmaps-font-size |
Definiert die Schriftgröße des Eingabefeldes und der Ergebnisliste. | CSS-Font-Size |
14px |