Für die Implementierung einer Autocomplete-Suche, welche gefundene Ergebnisse nach Wunsch des Nutzers auf die SmartMaps-Karte geokodiert, wird vorerst im body-Tag des HTML-Skriptes ein div-Element mit der ID map-wrapper hinzugefügt.

  <div id="map-wrapper">
     ...
  </div>

Der map-wrapper beinhaltet in sich ein Formular, in dem sich ein input-Element des Typs search befindet. Dieses input-Element stellt die Autocomplete-Suche anhand einer Suchleiste in der Benutzeroberfläche bereit und besitzt die ID Autocomplete.

    <form class="float">
      <input id="Autocomplete" class="ym-search" type="search" placeholder="Suche">
    </form>

Für die Anzeige der SmartMaps-Karte, beinhaltet der map-wrapper ein leeres div-Element mit der ID map.  In diesem wird zur Laufzeit die Karte geladen. Für das div-Element kann man durch das style-Attribut eine feste Höhe und Breite für die Karte festlegen.

    <div id="map" style="height: 400px; width: 500px;"></div>

Für die Umsetzung der Funktionalität der Autocomplete-Suche und die dazugehörige Geokodierung der Ergebnisse, ist die Einbindung von JavaScript-Code notwendig. Dieser kann, wie in diesem Beispiel, anhand eines script-Tags im HTML-Skript oder in einer separaten .js-Datei eingebunden werden. Alle Variablen und Funktionen werden in der ym.ready-Methode implementiert, da diese Abhängigkeiten auflöst, um die eigentliche Kartenanwendung zu starten. In den Options übergibt man { autocomplete: 5 } damit die neue Version 5 des Autocomplete verwendet wird.

    ym.ready({ autocomplete: 5 }, function(modules) {

      ...

    });

Für das Anzeigen der SmartMaps-Karte zur Geokodierung der Autocomplete-Ergebnisse wird ein Objekt der Klasse ym.map angelegt. Als Parameter wird dabei die ID des div-Elementes übergeben, in dem die Karte eingezeichnet werden soll, und die gewünschten Karten-Optionen (Startposition, Startzoom-Level, usw.). Um die Karte weiterhin im Code zu verwalten, wird das Objekt in einer Variable map gelagert.

      var map = ym.map("map", {
        center: ym.latLng(49.021273, 8.439316),
        zoom: 14
      });

Für die Geokodierung der Ergebnisse der Autocomplete-Suche werden die Methoden der Klasse ym.services.GeoCoder() benötigt. Um diese zu nutzen wird ein Objekt der Klasse in die Variable geocoder gelagert.

      var geocoder = new ym.services.GeoCoder();

Um die Geokodierung zu verfolgen, nutzt man für die geoCoder-Klasse, welche die Geokodierung auf der SmartMaps-Karte ermöglicht, einen EventEmitter. Dieser ermöglicht durch seine on-Methode, dass ein Listener hinzugefügt wird. Der Listener führt Funktionen bei bestimmten Events durch und kann somit genutzt werden um zwischen einer erfolgreichen und nicht erfolgreichen Geokodierung zu unterscheiden. In dem Falle ist die GeoCoder-Klasse mit einen EventEmitter schon ausgestattet und kann direkt auf die on-Methode zugreifen.
Im Falle einer erfolgreichen Geokodierung ('success') wird auf der SmartMaps-Karte der Bereich der geokodierten Adresse angezeigt.

      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());
        }
      });

Die Funktionalität der Autocomplete-Suche wird durch ein Objekt der Klasse ym.modules.AutoComplete realisiert. Dieses wird in die Variable autoComplete gelagert. Für die Initialisierung des Objektes werden zwei Parameter benötigt: Ein Selector, für den ein jQuery-Objekt oder ein CSS3-Selektor übergeben werden kann, der auf das Eingabefeld für das Autocomplete verweist (Hier: input-Element mit der ID Autocomplete), und Settings, in denen verschiedene Bedingungen und Einstellungen für die Autocomplete-Suche vorgenommen werden können.
Im folgenden Beispiel wird im Settings-Parameter definiert, dass die Autocomplete-Suche sich auf die Adressen in Deutschland beschränkt und diese im Rückgabetyp JSONP zurückgibt. Des Weiteren wird eine Funktion definiert, welche sobald ein Eintrag aus der Liste vom Nutzer gewählt wird, die dementsprechende Geokodierung startet.

      var autoComplete = modules.autoComplete("#Autocomplete", {
        dataType: "jsonp",
        isoCountries: ['de'],
        // Funktion wird aufgerufen, sobald ein Eintrag aus der Liste ausgewählt wurde.
        onSelected: function(geoJson) {
          geocoder.geocode(geoJson.properties);
        }
      });

Die Autocomplete-Suche ist nun erfolgreich eingebunden.