0151 355 4555

Auto-Complete Replacement

By default, PredictiveAddress will display an auto-complete dropdown beneath the text input element it is applied to. However, if you want to override this behaviour you can supply your own custom user interface 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 parameters 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 correctly. 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:

  • label - the text to be shown to the user
  • value - the internal identifier for the address
  • container - a 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.

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

<script type="text/javascript">

$('#address1').predictiveaddressui({
    ajaxKey: 'your-ajax-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;
	}
}).show();

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>