Find JS Library Migration

This guide explains how to move from the GetAddress Find JavaScript library to Data8’s Postcode Lookup JavaScript library.

The GetAddress Find library lets users type in a postcode and then choose their address from a dropdown list, automatically inserting the selected address into the relevant form fields.

Data8’s Postcode Lookup JavaScript library delivers the same core behaviour with a very similar setup. It adds a Find button beside the postcode input on your address form.

When the user presses the Find button, a list of matching addresses for that postcode is displayed. Selecting one of these results automatically populates the remaining address fields in the form.

Key Differences

Feature	GetAddress Find	Data8
CDN Script	`getaddress-find-2.1.0.min.js`	`address_min.js`
Initialisation	`getAddress.find()`	`data8.postcodeLookupButton()`
Container Element	Renders into a container div	Renders into a container element
Field Binding	CSS selects via `output_fields`	CSS selectors via method parameter
Event Handling	Document-level events	Automated

Complete Example: Before & After

GetAddress Find

<script src="https://cdn.getaddress.io/scripts/getaddress-find-2.1.0.min.js"></script>
<form>
  <!-- Container for postcode lookup widget -->
  <div id="postcode_lookup"></div>

  <label>First Address Line</label>
  <input id="formatted_address_0" type="text" />

  <label>Second Address Line</label>
  <input id="formatted_address_1" type="text" />

  <label>Third Address Line</label>
  <input id="formatted_address_2" type="text" />

  <label>Town</label>
  <input id="formatted_address_3" type="text" />

  <label>County</label>
  <input id="formatted_address_4" type="text" />

  <label>Postcode</label>
  <input id="postcode" type="text" />
</form>

<script>
  getAddress.find("postcode_lookup", "API_KEY", {
    output_fields: {
      formatted_address_0: "formatted_address_0",
      formatted_address_1: "formatted_address_1",
      formatted_address_2: "formatted_address_2",
      formatted_address_3: "formatted_address_3",
      formatted_address_4: "formatted_address_4",
      postcode: "postcode",
    },
  });
</script>

Data8

<script type="text/javascript" src="https://webservices.data-8.co.uk/javascript/address_min.js"></script>
<form>
  <!-- Container for postcode lookup widget -->
  <div id="postcode_lookup"></div>

  <label>First Address Line</label>
  <input id="formatted_address_0" type="text" />

  <label>Second Address Line</label>
  <input id="formatted_address_1" type="text" />

  <label>Third Address Line</label>
  <input id="formatted_address_2" type="text" />

  <label>Town</label>
  <input id="formatted_address_3" type="text" />

  <label>County</label>
  <input id="formatted_address_4" type="text" />

  <label>Postcode</label>
  <input id="postcode" type="text" />
</form>

<script>
  new data8.postcodeLookupButton(
    [
      { element: 'formatted_address_0', field: 'line1' },
      { element: 'formatted_address_1', field: 'line2' },
      { element: 'formatted_address_2', field: 'line3' },
      { element: 'formatted_address_3', field: 'town' },
      { element: 'formatted_address_4', field: 'county' },
      { element: 'postcode', field: 'postcode' }
    ],
    {
      // Change this to your own API Key
      ajaxKey: 'your-api-key',

      // Change this to your Postcode Lookup licence type
      license: 'WebClickFull'
    }
  ).show();
</script>

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

GetAddress Field	Data8 Field	Notes
`formatted_address_0`	`line1`	The field should contain the corresponding line of the address
`formatted_address_1`	`line2`	The field should contain the corresponding line of the address
`formatted_address_2`	`line3`	The field should contain the corresponding line of the address
`formatted_address_3`	`line4`	The field should contain the corresponding line of the address
`formatted_address_4`	`line5`	The field should contain the corresponding line of the address
`formatted_address_5`	`line6`	The field should contain the corresponding line of the address
`formatted_address_3`	`town`	The field should contain the town name
`formatted_address_4`	`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

Advanced Options and Configuration

Please see the Postcode Lookup (JavaScript) documentation page for all the configuration 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.