For the implementation of an autocomplete search, which geocodes found results to the SmartMaps map according to the user's wishes, a div element with the ID map-wrapper is first added to the body tag of the HTML script.

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

The map-wrapper contains a form with an input element of the type search. This input element provides the autocomplete search using a search bar in the user interface and has the ID Autocomplete.

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

To display the SmartMaps map, the map-wrapper contains an empty div-element with the ID map.  In this div-element the map is loaded at runtime. For the div-element you can set a fixed height and width for the map with the style-attribute.

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

To implement the functionality of the autocomplete search and the corresponding geocoding of the results, the integration of JavaScript code is necessary. As in this example, this code can be included in the HTML script or in a separate .js file using a script tag. All variables and functions are implemented in the ym.ready method, because this method resolves dependencies to start the actual map application.

    ym.ready(function(modules) {

      ...

    });

To display the SmartMaps map for geocoding the Autocomplete results, an object of the class ym.map is created. The ID of the div element in which the map is to be drawn and the desired map options (start position, start zoom level, etc.) are passed as parameters. To manage the map further in code, the object is stored in a variable map.

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

For geocoding the results of the autocomplete search the methods of the class ym.services.GeoCoder() are required. To use these methods an object of the class is stored in the variable geocoder.

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

To track the geocoding, an EventEmitter is used for the geoCoder class, which enables geocoding on the SmartMaps map. This enables by its on-method that a listener is added. The listener performs functions on certain events and can be used to distinguish between successful and unsuccessful geocoding. In this case the geoCoder class is already equipped with an EventEmitter and can directly access the on-method.
In case of a successful geocoding ('success') the SmartMaps map shows the area of the geocoded address.

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

The functionality of the autocomplete search is realized by an object of the class ym.modules.AutoComplete. This object is stored in the variable autoComplete. For the initialization of the object two parameters are needed: A selector, for which a jQuery object or a CSS3 selector can be passed, which points to the input field for the autocomplete (here: input element with the ID Autocomplete), and settings, in which different conditions and settings for the autocomplete search can be made.
In the following example, the Settings parameter defines that the Autocomplete search is restricted to addresses in Germany and returns JSONP in the return type. Furthermore a function is defined, which starts the corresponding geocoding as soon as the user selects an entry from the list.

      var autoComplete = modules.autoComplete("#Autocomplete", {
        dataType: "jsonp",
        locales: ['DE'],
        // Function is called as soon as an entry is selected from the list.
        onSelected: function(geoJson) {
          geocoder.geocode(geoJson.properties.location);
        }
      });

The autocomplete search is now successfully integrated.