Skip to content

Autocomplete form

This example demonstrates the usage of autocomplete filtered for the address element street. Click on an autocomplete result to fill out the form fields.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Autocomplete Form</title>
    <style>
    html,
    body {
    height: 100%;
    font-family: "Open Sans", Helvetica, sans-serif;
    margin: 0;
    }
    :root {
    --smartmaps-boxshadow: 0 0 0 rgba(0, 0, 0, 0);
    }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col">
          <form>
            <input
              id="ac"
              class="sm-search"
              type="search"
              placeholder="Enter address"
              value=""
              style="width: 400px"
            />
            <br /><br /><br />
            <div class="input-group input-group-sm mb-3">
              <span class="input-group-text">Street</span>
              <input id="street" class="form-control" />
              <span class="input-group-text">No.</span>
              <input id="houseNo" class="form-control" />
            </div>
            <div class="input-group input-group-sm mb-3">
              <span class="input-group-text">Zip</span>
              <input id="zip" class="form-control" />
              <span class="input-group-text">City</span>
              <input id="city" class="form-control" />
            </div>
            <div class="input-group input-group-sm mb-3">
              <span class="input-group-text">State</span>
              <input id="state" class="form-control" />
              <span class="input-group-text">Country</span>
              <input id="country" class="form-control" />
            </div>
          </form>
        </div>
      </div>
    </div>
    <script src="https://cdn.smartmaps.cloud/packages/smartmaps/autocomplete/v5/umd/autocomplete.min.js"></script>
    <script>
      const apiKey = "INSERT API-KEY";

      const autocompleteElement = document.querySelector("#ac");

      const autocompleteOptions = {
        isoCountries: [],
        includeFilters: {
          street: true,
        },
        dataType: "json",
      };

      async function init() {
        const autocomplete =
          await smartmaps.autocompleteService.createAutocomplete(
            autocompleteElement,
            apiKey,
            autocompleteOptions
          );

        autocomplete.addEventListener("ready", () => {
          var isFirefox = typeof InstallTrigger !== "undefined";
          if (!isFirefox) {
            document.getElementById("ac").autocomplete = "disabled";
          }
        });
        autocomplete.addEventListener("selected", (e) => {
          const address = e.detail.properties;
          document.getElementById("street").value = address.street
            ? address.street
            : "";
          document.getElementById("houseNo").value = address.houseNo
            ? address.houseNo
            : "";
          document.getElementById("zip").value = address.zip ? address.zip : "";
          document.getElementById("city").value = address.city
            ? address.city
            : "";
          document.getElementById("country").value = address.countryLongName
            ? address.countryLongName
            : "";
          document.getElementById("state").value = address.state
            ? address.state
            : "";
        });
      }

      init();
    </script>
  </body>
</html>