Auto-Complete Replacement

Give PredictiveAddress your own custom look and feel.

Example

An example is shown below that will show the list of addresses within a custom element on the page

<script type="text/javascript">
var txt = document.getElementById('address1');
new data8.predictiveaddressui(txt, {
  ajaxKey: 'your-api-key',
  fields: [
    { element: 'address1', field: 'line1' },
    { element: 'address2', field: 'line2' },
    { element: 'address3', field: 'line3' },
    { element: 'city', field: 'town' },
    { element: 'county', field: 'county' },
    { element: 'postcode', field: 'postcode' }
  ],
  showResults: function(pa, results) {
    // Clear current results
    var container = document.getElementById('results');
    while (container.firstChild)
      container.removeChild(container.firstChild);
         
    // Check if there was an error
    if (!results.Status.Success) {
      var err = document.createElement('div');
      err.style.backgroundColor = 'red';
      err.appendChild(document.createTextNode(results.Status.ErrorMessage));
      container.appendChild(err);
      return true;
    }
         
    // Show the results
    for (var i = 0; i < results.Results.length; i++) {
      var item = results.Results[i];
      addResultToList(container, item, pa);
    }
         
    return true;
  }
});

addResultToList = function(container, item, pa) {
  var div = document.createElement('div');
  div.appendChild(document.createTextNode(item.label));
  if (item.container) {
    div.appendChild(document.createTextNode(item.items + ' items'));
    div.onclick = function() {
      pa.itemDrilledDown(item.value);
    };
  }
  else {
    div.onclick = function() {
      pa.itemClicked(item.value);
    };
  }
  container.appendChild(div);
}
</script>

Overview

The standard PredictiveAddress script will give you a complete user interface, but you might want to provide your own.

If you want to override the standard user interface behaviour, while still taking advantage of the other logic provided by the data8.predictiveaddressui object, you can supply your own UI logic using the showResults callback method.

By specifying a callback method in the options supplied to PredictiveAddress you can perform any operation at the point a new set of results are ready to be displayed. This method can also return a value indicating if it has provided its own user interface. If it returns true, the default PredictiveAddress interface will not be shown.

The values supplied as parameteres to the callback method are:

The data8.predictiveaddressui instance that triggered the callback, and
The results of the address search operation

The results parameter will contain a Status property that indicates if the search completed successfully. If this indicates an error, an error message is also included that can be shown to the user.

If the operation did complete successfully, the matching addresses will be included in the Results property. Each result includes the following properties:

Name	Description
`label`	The text to be shown to the user
`value`	The internal identifier for the address
`container`	A boolean value indicating if the item can be drilled-down into
`items`	If `container` is `true`, the number of addresses within it

When the user selects an address through whatever user interface the callback method produces, either the itemDrilledDown (if container is true) or itemClicked methods on the data8.predictiveaddressui instance should be called with the value associated with the selected address passed as the parameter.