Autocomplete JS Library Migration

This guide helps you migrate from GetAddress's Autocomplete JavaScript library to Data8's PredictiveAddress™ JavaScript library.

The idea here is autocomplete functionality is provided so that is can be dropped into web pages - Data8's options differs from the GetAddress option but the end result is the same.

Key Differences

Feature	GetAddress 1.x/2.x	Data8
CDN Script	`getaddress-autocomplete-*.js`	`predictiveaddress.js` and `predictiveaddress.css`
Initialisation	`getAddress.autocomplete()`	`data8.predictiveaddressui()`

Which Version Are You Using?

Check your script tag to determine your GetAddress version:

<!-- Version 1.x -->
<script src="https://cdn.getaddress.io/scripts/getaddress-autocomplete-1.*.js"></script>

<!-- Version 2.x -->
<script src="https://cdn.getaddress.io/scripts/getaddress-autocomplete-2.*.js"></script>

Field Name Mappings

GetAddress and Data8 use different field names for certain address components:

GetAddress Field	Data8 Field	Notes
N/A	`organisation`	The field should contain the company name, where available
`building_name`	`building`	The field should contain the building name and/or number
`line_1`	`line1`	The field should contain the corresponding line of the address
`line_2`	`line2`	The field should contain the corresponding line of the address
`line_3`	`line3`	The field should contain the corresponding line of the address
`line_4`	`line4`	The field should contain the corresponding line of the address
N/A	`line5`	The field should contain the corresponding line of the address
N/A	`line6`	The field should contain the corresponding line of the address
`town_or_city`	`town`	The field should contain the town name
`county`	`county`	The field should contain the county name
`postcode`	`postcode`	The field should contain the postcode
`country`	`country`	The field should contain the country name or code

Migrating from GetAddress 1.x

GetAddress version 1.x automatically binds address fields using the output_fields configuration option.

Complete Example: Before & After

GetAddress 1.x

<form>
  <input id="line_1" type="text" />
  <input id="line_2" type="text" />
  <input id="line_3" type="text" />
  <input id="town_or_city" type="text" />
  <input id="postcode" type="text" />
</form>

<script src="https://cdn.getaddress.io/scripts/getaddress-autocomplete-1.3.0.min.js"></script>
<script>
  getAddress.autocomplete("line_1", "YOUR_API_KEY", {
    output_fields: {
      line_2: "line_2",
      line_3: "line_3",
      town_or_city: "town_or_city",
      postcode: "postcode",
    },
  });
</script>

Data8

<script type="text/javascript" src="https://webservices.data-8.co.uk/javascript/predictiveaddress.js"></script>
<link rel="stylesheet" href="https://webservices.data-8.co.uk/content/predictiveaddress.css" />

<form>
  <input id="line_1" type="text" />
  <input id="line_2" type="text" />
  <input id="line_3" type="text" />
  <input id="city" type="text" />
  <input id="county" type="text" />
  <input id="postcode" type="text" />
</form>

<script>
  // Get a reference to the element you wish to use for auto-complete.
  // Usually the first line of the address.
  var txt = document.getElementById('line_1');
  new data8.predictiveaddressui(txt, {
    // Change this to your own API Key
    ajaxKey: 'your-api-key',
    fields: [
      { element: 'line_1', field: 'line1' },
      { element: 'line_2', field: 'line2' },
      { element: 'line_3', field: 'line3' },
      { element: 'town_or_city', field: 'town' },
      { element: 'postcode', field: 'postcode' }
    ]
  });
</script>

Migrating from GetAddress 2.x

GetAddress version 2.x requires manual field binding via event listeners. Data8 simplifies this with automatic field binding.

Complete Example

GetAddress 2.x

<script src="https://cdn.getaddress.io/scripts/getaddress-autocomplete-2.0.2.min.js"></script>
<form>
  <input id="line1" type="text" placeholder="Search address" />
  <input id="line2" type="text" />
  <input id="line3" type="text" />
  <input id="line4" type="text" />
  <input id="line5" type="text" />
  <input id="postcode" type="text" />
</form>

<script>
  const autocomplete = getAddress.autocomplete("line1", "YOUR_API_KEY");

  // Manual field binding required
  autocomplete.addEventListener(
    "getaddress-autocomplete-address-selected",
    function (e) {
      document.getElementById("line1").value =
        e.address.formatted_address[0];
      document.getElementById("line2").value =
        e.address.formatted_address[1];
      document.getElementById("line3").value =
        e.address.formatted_address[2];
      document.getElementById("line4").value =
        e.address.formatted_address[3];
      document.getElementById("line5").value =
        e.address.formatted_address[4];
      document.getElementById("postcode").value = e.address.postcode;
    },
  );
</script>

Data8

<script type="text/javascript" src="https://webservices.data-8.co.uk/javascript/predictiveaddress.js"></script>
<link rel="stylesheet" href="https://webservices.data-8.co.uk/content/predictiveaddress.css" />

<form>
  <input id="line1" type="text" />
  <input id="line2" type="text" />
  <input id="line3" type="text" />
  <input id="line4" type="text" />
  <input id="line5" type="text" />
  <input id="postcode" type="text" />
</form>

<script>
  // Get a reference to the element you wish to use for auto-complete.
  // Usually the first line of the address.
  var txt = document.getElementById('line1');
  new data8.predictiveaddressui(txt, {
    // Change this to your own API Key
    ajaxKey: 'your-api-key',
    fields: [
      { element: 'line1', field: 'line1' },
      { element: 'line2', field: 'line2' },
      { element: 'line3', field: 'line3' },
      { element: 'line4', field: 'town' },
      { element: 'line5', field: 'county' },
      { element: 'postcode', field: 'postcode' }
    ]
  });
</script>

Advanced Options, Customisation, and Event Handling

The PredictiveAddress control uses a number of CSS classes to control how it is displayed. Default settings for these are included in the standard PredictiveAddress stylesheet, but you can customise them in your own stylesheets as well to ensure PredictiveAddress blends with the rest of your website style.

It is also possible to completely replace the user interface for PredictiveAddress.

PredictiveAddress works internationally, but it is possible to change the settings for international forms. You can allow or bar specific countries, change the language, and separate the country from the address for dropdowns.

Please see the PredictiveAddress (JavaScript) documentation page for all the options available.

Need Help?

We are available 9am to 5:30pm UK time by phone +44 (0)151 355 4555 or email helpdesk@data-8.co.uk for migration assistance.