Addressen mit Autosuggest in der Karte darstellen

Implementierungen

Dieses Beispiel zeigt die Verwendung des FalkAutoSuggestControl. Die Vorschläge beim eintippen einer Adresse werden unter dem Eingabefeld angezeigt. Durch CSS kann die Anzeige beeinflusst werden.

Die vom AutoSuggestControl erzeugten Vorschläge werden in einem HTML-DOM-Element gerendert, welches die CSS-Klasse suggestions erhält.

Jeder einzelne Adressvorschlag befindet sich in einem eigenen Container. Für die einzelnen Einträge gelten folgende Regeln:

• Jeder dieser Container erhält in jedem Fall die CSS-Klasse suggest-entry.
• Das erste Element der Vorschlagsliste erhält zusätzlich die CSS-Klasse first-entry.
• Der letzte Eintrag erhält zusätzlich die CSS-Klasse last-entry.
• Der aktuell ausgewählte Eintrag erhält die CSS-Klasse current.

Eine Auswahl der Vorschläge ist sowohl über Tastatur (ARROW_UP, ARROW_DOWN) als auch über Mouse selektierbar, wobei auf dem selektierten Eintrag die CSS-Klasse current vergeben wird.

Diese Regeln gelten ausschließlich für alle Elemente innerhalb des Elementes mit der CSS-Klasse suggestions!

Parallel zu diesem Element existieren zwei HTML-DOM-Elemente, welche den CSS-Klassennamen hd (header) bzw. ft (footer) erhalten. Diese Elemente können über folgende Methoden des FalkAutoSuggestControl manipuliert werden, um zusätzliche Eintrage in die Liste aufnehmen zu können:

• Hinzufügen einer HTMLDomNode zum header (CSS-Klasse "hd"):
  FalkAutoSuggestControl#addHeaderElement(HTMLDomNode)
• Hinzufügen einer HTMLDomNode zum footer (CSS-Klasse "ft"):
  FalkAutoSuggestControl#addFooterElement(HTMLDomNode)
• Entfernen aller HTMLDomNodes vom header:
  FalkAutoSuggestControl#clearHeaderElement(HTMLDomNode)
• Entfernen aller HTMLDomNodes vom footer:
  FalkAutoSuggestControl#clearFooterElement(HTMLDomNode)

Die Verwaltung der DOM-Nodes und das regieren auf Benutzeraktionen liegt im Zuständigkeitsbereich des Entwicklers.

Hinweis: Das Reagieren auf Klick-Events ist in der Regel nicht möglich, da der AutoSuggest-Layer ausgeblendet wird, wenn das verknüpfte Text-Eingabefeld den Fokus verliert. Stattdessen wird vorgeschlagen, mousedown-Events zu verwenden.

Eine Manipulation des DOMs der Adressvorschläge wird ausdrücklich missbilligt.

Die 3 HTML-DOM-Elemente mit den CSS-Klassen suggestions, hd und ft sind unter einer DOM_Node zusammengefasst, welches ein HTML-DOM-Element mit der CSS-Klasse autosuggest-wrap ist.

Somit ergibt sich folgende HTML-Struktur für das AutoSuggest:

Die mit "elem" angegebenen HTMLDomNodes sind momentan über div-Elemente realisiert, es wird aber keine Gewähr übernommen, dass das zukünftig so bleibt. Für die Vergabe von CSS Regeln sollte daher auf die CSS-Klassen Bezug genommen werden.

Geocodierung

Um einen Geocode für die Eingabe zu erhalten, wird ausdrücklich empfohlen, die FalkAutoSuggestControl#geocodeLocation() Methode zu verwenden. Die Vorteile sind eine schnellere Reaktionszeit, da für übernommene Vorschläge keine erneute Kommunikation mit dem Geo-Server nötig ist und bessere Ergebnisse bei einer Ortssuche.

Sollte der Benutzer die vorgeschlagenen Ergebnisse verändern, verarbeitet das FalkAutoSuggestControl automatisch die Daten des Eingabefeldes, welches bei der Erzeugung des FalkAutoSuggestControls referenziert wurde.

Für den Erhalt der Ergebnisses einer Georeferenzierung erfolgt eine Event-Registrierung ähnlich zum FalkGeocoder.

Beispiel:

FalkAutoSuggestControl

Hier der in diesem Beispiel verwendete JavaScript Code:

CSS