1. Home
  2. Dokumente
  3. Karten
  4. Autovervollständigung

Autovervollständigung

Beschreibung

Die Autovervollständigung (Autocomplete) stellt aufgrund der Eingabe einer Adresse oder eines Adressbestandteils eine Liste von Ortsangaben zur Auswahl bereit. Diese Liste wird in Abhängigkeit von der Eingabe dynamisch verändert.

Initialisierung

So initialisieren Sie die Autocomplete-Komponente:

// Erzeuge die Klasse direkt.
var autocomplete1 = new ym.modules.AutoComplete('#autocomplete1',
{
	dataType: "jsonp",
	onSelected: function(geoJson){
		geocoder.geocode(geoJson.properties.location);
	}
});

// Verwende die Factory, um die Instanz zu erzeugen.
var autocomplete2 = ym.modules.autoComplete('#autocomplete2',
{
	dataType: "jsonp",
	onSelected: function(geoJson){
		geocoder.geocode(geoJson.properties.location);
	}
});

Constructor(selector, settings)

Parameter: selector

Im Feld des Selektors kann ein jQuery-Objekt oder ein CSS3-Selektor übergeben werden, der auf das Eingabefeld für das Autocomplete verweist.

Parameter: settings
Name Beschreibung Datentyp Standardwert
limit Maximale Anzahl an Treffern, die im Autocomplete angezeigt werden sollen. string 8
url Die URL zum Autocomplete-WebService. string https://autocomplete.yellowmap.de/
Autocomplete/Search
dataType Es gibt 3 Datentypen: "json", "jsonp" und "protobuf". string "json"
locales Die Länder, in denen gesucht werden soll: Es kann eine Zeichenfolge mit einem Ländercode übergeben werden oder ein Array mit beliebig vielen Ländercodes. Wird locales komplett leer gelassen, wird in allen Ländern gesucht.

Google Maps
Verwendet man SmartMaps zusammen mit Google Maps können im Moment nur 5 Ländercodes übergeben werden.

string
onInit(address, query) Das Event onInit wird aufgerufen, wenn ein Autocomplete-Aufruf gestartet wird. event
onSuggestion(geoJson, query) Sobald eine Liste von Treffern empfangen wird, wird onSuggestion aufgerufen. Sie erhält ein GeoJson und die Suchanfrage. event
onEmpty(query) Falls gar keine Treffer über das Autocomplete ermittelt werden konnte, wird onEmpty aufgerufen. Hier wird nur die Suchanfrage wieder zurückgeliefert. event
onSelected(geoJson, query) Die Auswahl eines Treffers in der Autocomplete-Vorschlagsliste löst onSelected aus. Dieses Ereignis liefert ein GeoJson und die Suchanfrage zurück. event
onError(error) Falls ein serverseitiges Problem oder ein Problem mit der Datenverbindung besteht, wird dieses Ereignis ausgelöst. event

Kontextsensitives Autocomplete

Durch die Verwendung des kontextsensitiven Autocompletes erhöhen Sie die Relevanz der gefundenen Suchtreffer im jeweiligen Kartenausschnitt. Die Funktion gewichtet die im Kartenausschnitt befindlichen Ortstreffer, sodass diese zuerst in der Trefferliste erscheinen. Hierdurch erhalten Ihre Benutzer noch schneller das gewünschte Ergebnis. Natürlich werden auch weiterhin Treffer außerhalb des Kartenausschnitts gefunden.

Für die Verwendung müssen Sie einfach ein eigenes Koordinatenrechteck definieren. Alternativ können Sie auch Ihre SmartMaps-Karte als Suchausschnitt verwenden.

setMap(map) ab v3

Registriert eine Karte für die Suche des Autocomplete. Wenn die Karte im Autocomplete registriert ist, wird für die Lokalisierung automatisch das Rechteck des Kartenausschnitts als Suchbereich verwendet.

var autocomplete = ym.modules.autoComplete(element, settings);
autocomplete.setMap(map);

removeMap() ab v3

Entfernt die registrierte Karte aus der Suche des Autocomplete. Durch das Entfernen der Karte gibt es keine örtliche Eingrenzung mehr.

setLatLng(latLng) ab v3

Definiert einen Suchbereich mit Hilfe des in den Optionen gesetzten Radius, in dem die Suchanfrage ausgeführt werden soll.

autocomplete.setLatLng(ym.latLng(49, 10));

setBounds(latLngBounds) ab v3

Definiert einen Suchbereich anhand eines Suchrechtecks.

autocomplete.setBounds(ym.latLngBounds(ym.latLng(49, 10), ym.latLng(50, 11));

getLatLng() ab v3

Falls vorhanden, wird ein LatLng-Objekt zurückgeliefert, welches den Mittelpunkt des Suchrechtecks definiert. Falls kein Suchrechteck definiert ist, wird undefined zurückgegeben.

getBounds() ab v3

Falls vorhanden, wird ein LatLngBounds-Objekt zurück geliefert, welches das Suchrechteck definiert. Falls kein Suchrechteck definiert ist, wird undefined zurückgeliefert.

Beispiel

Dieses Beispiel ist vollständig; Sie können es lokal speichern und in einem http-Kontext ausführen. Sie müssen lediglich den Wert für den apiKey vorher ersetzen.

<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8" />
	<style>
		.awesomplete>input { width: 300px; }
	</style>
</head>
<body>
	<!-- Eingabefeld für die Autocomplete-Suche. -->
	<form class="float">
		<input id="all" class="ym-search" type="search" placeholder="search international">
	</form>

	<!-- Laden der SmartMaps-API. -->
	<script src="https://api.yellowmaps.eu/api_rst/api/loader/?apiKey={API_KEY}&libraries=free-3"></script>
	
	<!-- Zugriff auf die SmartMaps-API. -->
	<script>
		ym.ready({engine: "yellowmaps"}, function (modules) {
			var geocoder = new ym.services.GeoCoder();

			// GeoCoder als Beispiel für das onSelected-Ereignis des Autocomplete.
			geocoder.on('success', function (req, res) {
				if (res.body && res.body.features && res.body.features.length) {
					map.fitBounds(ym.geoJson(res.body.features[0]).getBounds());
				}
			});

			// Intitialisierung der Autocomplete-Komponente.
			var autoComplete = modules.autoComplete("#all", {
				dataType: "jsonp",
				limit: 6,
				onSelected: function (geoJson) {
					geocoder.geocode(geoJson.properties.location);
				}
			});
			
		});
	</script>
</body>
</html>

Weitere Informationen

Beispielszenario

Wie können wir helfen?