Postcode Lookup Styling

Get control over how the Postcode Lookup user interface is styled.

Bespoke Buttons

If you need more control than changing the CSS classes listed above, you can customise the code to create your own buttons.

To control how the "Find", "OK" and "Cancel" buttons are displayed, you can override the createButton function to set up these buttons as you require.

The sample below demonstrates overriding this function to use a link with the "button-small" CSS class (<a class="button-small">...</a>) instead of the default button (<input type="button" value="..." />)

// Define your own yourco.styledPostcodeLookupButton class,
// inheriting from data8.postcodeLookupButton
 
if (typeof (yourco) == 'undefined') {
  yourco = function () { };
}
 
yourco.styledPostcodeLookupButton = function (fields, options)
 {
  data8.postcodeLookupButton.apply(this, arguments);
};
 
yourco.styledPostcodeLookupButton.prototype = new data8.postcodeLookupButton();
 
// Override the createButton function to create buttons in your own format.
 
yourco.styledPostcodeLookupButton.prototype.createButton = function (label) {
  var button = document.createElement('a');
  button.className = 'button-small';
  button.href = 'javascript:void()';
  var text = document.createTextNode(label);
  button.appendChild(text);
  return button;
};
 
// Set up the postcode lookup system for your form.
 
new yourco.styledPostcodeLookupButton(
  [
    { element: 'company', field: 'organisation' },
    { element: 'address1', field: 'line1' },
    { element: 'address2', field: 'line2' },
    { element: 'address3', field: 'line3' },
    { element: 'city', field: 'town' },
    { element: 'county', field: 'county' },
    { element: 'postcode', field: 'postcode' }
  ],
  {
    // Change this to your own Ajax key
    ajaxKey: 'your-ajax-key',
 
    // Change this to your postcode lookup license type
    license: 'WebClickFull'
  }
).show();

CSS Classes

The following CSS classes are applied to allow you to control the display of the Postcode Lookup user interface:

CSS Class	Description
`data8-postcodelookup-dropdown`	Applied to the main element that is used as a dropdown below the postcode text box
`data8-postcodelookup-list`	Applied to the list of addresses within the dropdown
`data8-postcodelookup-ok`	Applied to the "OK" button at the bottom of the address list
`data8-postcodelookup-cancel`	Applied to the "Cancel" button at the bottom of the address list

If you set the bootstrapUsed option to true, these classes are not applied and a different user interface is applied instead which uses the standard Bootstrap CSS classes.