Address Lookup using HTML and JavaScript

Added address autocomplete to your website by adding CSS classes to HTML text boxes and with 1 line of open source code.

by Addy Solutions

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>NZ Address Autocomplete Example | Addysolutions.com</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">
  </head>
  <body style="font-family: arial; font-size: 10pt;">
  <form>
  
   <h2>Address Form test</h2>
      <table>
        <tr>
          <td class="label">Address Line 1</td>
          <td>
            <input type="search" class="addy-line1" id="test-field-id" placeholder="Start typing an address.." auto-complete>
          </td>
        </tr>
        <tr>
          <td>Address Line 2</td>
          <td>
            <input type="text" class="addy-line2" id="address-2">
          </td>
        </tr>
        <tr>
          <td>Suburb</td>
          <td>
            <input type="text" class="addy-suburb" id="address-suburb">
          </td>
        </tr>
        <tr>
          <td>City</td>
          <td>
            <input type="text" class="addy-city" id="address-city">
          </td>
        </tr>
        <tr>
          <td>Postcode</td>
          <td>
            <input type="text" class="addy-postcode" id="address-postcode">
          </td>
        </tr>
      </table>
  
  </form>
  
  <script>
var addyKey = "demo-api-key";
function initAddy() {
  var addyComplete = new AddyComplete(document.getElementById('test-field-id'));
  addyComplete.options.excludePostBox = true;
  addyComplete.fields = {
    address1: document.getElementById('test-field-id'),
    address2: document.getElementById('address-2'),
    city: document.getElementById('address-city'),
    postcode: document.getElementById('address-postcode'),
    suburb: document.getElementById('address-suburb')
  }
}

(function (d, w) {
  // Add the address autocomplete JavaScript
  var s = d.createElement('script');
  var addyUrl = 'https://www.addysolutions.com/address-lookup/1.6.2/js/addy.min.js';
  s.src = addyUrl + '?loadcss=true&enableLocation=false&country=au&auKey=' + addyKey;
  s.type =...