SmartyStreets US Autocomplete Pro

by smartystreets

HTML

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!DOCTYPE html>
<html lang="en">

  <head>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  </head>

  <body>

    <div class="content-white us-autocomplete-pro-example">
      <h2>US Autocomplete Pro</h2>
      <div class="container">
        <div class="us-autocomplete-pro-input-container">
          <label for="us-autocomplete-pro-address-input">Start typing a street address and watch how fast we send you
            verified suggestions</label><br>
          <input id="us-autocomplete-pro-address-input" placeholder="Enter Address" autocomplete="smartystreets"/>
          <ul class="us-autocomplete-pro-menu" style="display:none;"></ul>
          <div class="disabled-inputs">
            <input id="city" placeholder="City" disabled />
            <div class="state-and-zip">
              <input id="state" placeholder="State" disabled />
              <input id="zip" placeholder="Zip*" disabled />
            </div>
          </div>
        </div>
        <div class="data-container">
          <div>
            <h3>*Additional Data</h3>
            <div class="labels inline align-right">
              <span>Latitude:</span><br>
              <span>Longitude:</span><br>
              <span>County:</span><br>
              <span>Time Zone:</span>
            </div>
            <div class="data inline align-left">
              <span id="data-lat"></span><br>
              <span id="data-lon"></span><br>
              <span id="data-county"></span><br>
              <span id="data-time-zone"></span>
            </div>
            <div class="more-data">
              ... along with 32 other points of data.
            </div>
          </div>
        </div>
        <div class="disclaimer">*ZIP Code & Additional Data retrieved from <a...

CSS

.us-autocomplete-pro-example {
  font-family: helvetica;
  color: #0a0a0a;
  text-align: center;
}

.us-autocomplete-pro-example .container {
  background-color: #ddd;
  padding: 2em;
}

.us-autocomplete-pro-example .container label {
  color: #0a0a0a;
}

.us-autocomplete-pro-example .container input {
  font-size: 16px;
  padding: 0 .75em;
  border: 1px solid #ccc;
  color: #0a0a0a;
  height: 3em;
  box-sizing: border-box;
  width: 100%;
  margin-top: .5em;
}

.us-autocomplete-pro-example .container input:disabled {
  background-color: #eee;
  color: #999;
}

.us-autocomplete-pro-example .container .us-autocomplete-pro-input-container {
  margin: 0 auto 2em;
  width: 60%;
}

.us-autocomplete-pro-example .container .us-autocomplete-pro-menu {
  overflow-y: scroll;
  max-height: 13em;
  box-shadow: 0 7px 7px rgba(0, 0, 0, 0.12);
  color: #7d7d7d;
  position: absolute;
  text-align: left;
  width: inherit;
  z-index: 10;
}

.us-autocomplete-pro-example .container .us-autocomplete-pro-menu li div {
  padding: .75em;
}

.us-autocomplete-pro-example .container .us-autocomplete-pro-menu b {
  color: #0a0a0a;
}

.us-autocomplete-pro-example .container .us-autocomplete-pro-menu .ui-menu-item-wrapper {
  padding-left: 1em;
}

.us-autocomplete-pro-example .container .labels {
  display: inline-block;
  font-weight: bold;
  width: 40%;
}

.us-autocomplete-pro-example .container .data {
  display: inline-block;
  padding-left: 1em;
  width: 50%;
}

.us-autocomplete-pro-example .docs-pricing-links {
  font-weight: bold;
  margin-top: 2em;
}

.inline {
  display: inline-block;
  vertical-align: top;
  width: 40%;
}

.data-container {
  text-align: center;
  margin-bottom: 2em;
}

.align-right {
  text-align: right;
}

.align-left {
  text-align: left;
}

JavaScript

$(function() {

  var menu = $(".us-autocomplete-pro-menu");
  var input = $("#us-autocomplete-pro-address-input");

  function getSuggestions(search, selected) {
    $.ajax({
      url: "https://us-autocomplete-pro.api.smartystreets.com/lookup?",
      data: {
        // Don't forget to replace the auth-id value with your own Website Key
        "auth-id": 21102174564513388,
        "search": search,
        "selected": (selected ? selected : "")
      },
      dataType: "jsonp",
      success: function(data) {
        if (data.suggestions) {
          buildMenu(data.suggestions);
        } else {
          noSuggestions();
        }
      },
      error: function(error) {
        return error;
      }
    });
  }

  function getSingleAddressData(address) {
    $.ajax({
      url: "https://us-street.api.smartystreets.com/street-address?",
      data: {
        // Don't forget to replace the auth-id value with your own Website Key
        "auth-id": 21102174564513388,
        "street": address[0],
        "city": address[1],
        "state": address[2]
      },
      dataType: "jsonp",
      success: function(data) {
        $("#zip").val(data[0].components.zipcode);
        $("#data-lat").html(data[0].metadata.latitude);
        $("#data-lon").html(data[0].metadata.longitude);
        $("#data-county").html(data[0].metadata.county_name);
        $("#data-time-zone").html(data[0].metadata.time_zone);
      },
      error: function(error) {
        return error;
      }
    });
  }

  function clearAddressData() {
    $("#city").val("");
    $("#state").val("");
    $("#zip").val("");
    $("#data-lat").empty();
    $("#data-lon").empty();
    $("#data-county").empty();
    $("#data-time-zone").empty();
  }

  function noSuggestions() {
    var menu = $(".us-autocomplete-pro-menu");
    menu.empty();
    menu.append("<li class='ui-state-disabled'><div>No Suggestions Found</div></li>");
    menu.menu("refresh");
  }

  function buildAddress(suggestion) {
    var...