Address Autofill

Try autofill outside of azure

by Amy Ruddy

HTML

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container py-2">
<div class="py-2 text-danger fs-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-exclamation-octagon-fill" viewBox="0 0 16 16">
  <path d="M11.46.146A.5.5 0 0 0 11.107 0H4.893a.5.5 0 0 0-.353.146L.146 4.54A.5.5 0 0 0 0 4.893v6.214a.5.5 0 0 0 .146.353l4.394 4.394a.5.5 0 0 0 .353.146h6.214a.5.5 0 0 0 .353-.146l4.394-4.394a.5.5 0 0 0 .146-.353V4.893a.5.5 0 0 0-.146-.353L11.46.146zM8 4c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995A.905.905 0 0 1 8 4zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</svg> This is currently disabled. For testing only. To test, must add the Google Places script tag with key and callback and turn off any restrictions.</div>
<code>
  &lt;script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&amp;callback=initAutocomplete&amp;libraries=places&amp;v=weekly"
      async
    >&lt;/script&gt;
</code>
  <div class="attr mt-3" id="attributeList">
        <ul>
          <li class="DropdownSingleSelect">
            <div class="attrEntry">
              <label for="HomeCountry form-label">Country</label>
              <select class="form-select" id="HomeCountry"><option style="display:none" disabled="disabled" value="" selected="">Country</option><option value="US" selected="">United States</option></select>
            </div>
          </li>
          <li class="TextBox">
            <div class="attrEntry">
              <label for="HomeAddressLine1" class="form-label">Address 1</label>
              <input id="HomeAddressLine1" class="form-control" type="text" placeholder="Address 1"  required="" aria-required="true" aria-label="This information is required., Address 1">
            </div>
          </li>
          <li...

CSS

ul {
  list-style: none;
}

.form-label {
  font-size: 0.75rem;
}

JavaScript

let autocomplete;
let address1Field;
let address2Field;
let cityField;
let stateField;
let postalField;
let countyField;
let countryField;

function initAutocomplete() {
    address1Field = document.querySelector("#HomeAddressLine1");
    address2Field = document.querySelector("#HomeAddressLine2");
    cityField = document.querySelector("#HomeCity");
    stateField = document.querySelector("#HomeState");
    postalField = document.querySelector("#HomeZip");
    countyField = document.querySelector("#HomeCounty");
    countryField = document.querySelector("#HomeCountry");

    if (address1Field) {
        autocomplete = new google.maps.places.Autocomplete(address1Field, {
            componentRestrictions: { country: ["us"] },
            fields: ["address_components", "geometry"],
            types: ["address"],
        });
    }

    autocomplete.addListener("place_changed", fillInAddress);
}

function fillInAddress() {
    const place = autocomplete.getPlace();
    let address1 = "";
    let postcode = "";
    for (const component of place.address_components) {
        const componentType = component.types[0];

        switch (componentType) {
            case "street_number": {
                address1 = `${component.long_name} ${address1}`;
                break;
            }

            case "route": {
                address1 += component.short_name;
                break;
            }

            case "postal_code": {
                postcode = `${component.long_name}${postcode}`;
                break;
            }

            case "postal_code_suffix": {
                postcode = `${postcode}-${component.long_name}`;
                break;
            }
            case "locality":
                if (cityField) {
                    cityField.value = component.long_name;
                }
                break;

            case "administrative_area_level_1": {
                if (stateField) {
                    stateField.value =...