Examples
Plugin Examples
We have added some examples below to demonstrate different configurations of the Autoaddress jQuery plugin. By adding custom logic based on events you can integrate the Autoaddress plugin easily into your environment.
Using the onAddressFound(data) Callback, you can use the response data to auto-populate a sample form.
We recommend using the preferred address format by setting vanityMode to true and to pass an addressProfile as a parameter. This will return a reformattedAddressin the response data.
Contact us to get a custom profile made for your form.
<code class="hljs language-html"><script type="text/javascript">
$(function(){
$("#myDiv").AutoAddress({
key : "YOUR_KEY",<br /> vanityMode : true,
addressProfile: "Demo5LineV2",
onAddressFound: function (<strong><a href="/en-ie/support/developer-centre/api/find-address" sfref="[f669d9a7-009d-4d83-ddaa-000000000002]3f75467a-3b6a-6e53-8fda-ff0000b6b9f2">data</a></strong>) {
if (data.reformattedAddress) {
$.each(data.reformattedAddress, function (index, value) {
$('#addressLine' + (index + 1)).val(value);
});
}
if (data.postcode) {
$('#postcode').val(data.postcode);
}
}
});
});
</script>
If you wish to have a custom address format returned for your form you can pass an addressProfile as a parameter. This will then return a reformattedAddress in the response to your specification.
Contact us to get a custom profile made for your form.
<code class=" hljs language-html"><script type="text/javascript">
$(function(){
$("#myDiv").AutoAddress({
key : "YOUR_KEY",<br /> vanityMode : true,
addressProfile: "Demo5LineV2",
onAddressFound: function (<strong><a href="/en-ie/support/developer-centre/api/find-address" sfref="[f669d9a7-009d-4d83-ddaa-000000000002]3f75467a-3b6a-6e53-8fda-ff0000b6b9f2">data</a></strong>) {
if (data.reformattedAddress) {
$.each(data.reformattedAddress, function (index, value) {
$('#addressLine' + (index + 1)).val(value);
});
}
if (data.postcode) {
$('#postcode').val(data.postcode);
}
}
});<br />});<br /></script>
<code>/*Add this to your HTML code*/<br /><div id="toggleForm" style="margin-top: 10px;"><br /> /*Your html markup for the form labels and text inputs goes here... eg. addressLine1, addressLine2 ... etc..*/<br /></div>
<code class=" hljs javascript">
<script type="text/javascript">
$(function(){
$("#myDiv").AutoAddress({
key : "YOUR_KEY",
vanityMode : true,
addressProfile: "Demo5LineV2",
onSearchCompleted: function(data){
$('#toggleForm #addressLine1,#toggleForm #addressLine2,#toggleForm #addressLine3,#toggleForm
#addressLine4,#toggleForm #addressLine5,#toggleForm #postcode').val('');
},
onAddressFound: function(data){
if (data.vanityAddress) {
$.each(data.vanityAddress, function (index, value) {
$('#toggleForm #addressLine' + (index + 1)).val(value);
});
}
if (data.postcode) {
$('#toggleForm #postcode').val(data.postcode.slice(0, 3) + " " + data.postcode.slice(3));
}
//Trigger showing the form div here. Use $('#toggleForm').hide(); to hide the address forms.
$('#toggleForm').show();
},
vanityMode : true
});<br /></script>
Using the onAddressFound(data) Callback, you can use the response data to auto-populate a sample form.
The Autoaddress jQuery Plugin can search in English and Irish. To switch the control to search in Irish you just need to configure the language property. This example also shows how you can configure the message labels of the plugin to suit your needs.
<code class=" hljs language-html"><script type="text/javascript">
$(function(){
$("#myDiv").AutoAddress({
key : "YOUR_KEY",
language: "GA",
vanityMode : true,
addressProfile: "Demo5LineV2",
onAddressFound: function (<strong><a href="/en-ie/support/developer-centre/api/find-address" sfref="[f669d9a7-009d-4d83-ddaa-000000000002]3f75467a-3b6a-6e53-8fda-ff0000b6b9f2">data</a></strong>) {
if (data.vanityAddress) {
$.each(data.vanityAddress, function (index, value) {
$('#addressLine' + (index + 1)).val(value);
});
}
if (data.postcode) {
$('#postcode').val(data.postcode);
}
}
});<br />});
</script>
<code class=" hljs javascript"><script type="text/javascript">
$("#myDiv").AutoAddress({<br /> key : "YOUR_KEY",
vanityMode : true,
addressProfile: "Demo5LineV2",<br /> onSearchCompleted: function(data){<br /> $('#verifyForm #addressLine1,#verifyForm #addressLine2,#verifyForm #addressLine3,#verifyForm #addressLine4,#verifyForm #addressLine5,#verifyForm #postcode').val('');<br /> },<br /> onAddressFound: function(args){<br /> if (args.vanityAddress) {<br /> $.each(args.vanityAddress, function (index, value) {<br /> $('#verifyForm #addressLine' + (index + 1)).val(value);<br /> });<br /> }<br /> if (args.postcode) {<br /> $('#verifyForm #postcode').val(args.postcode.slice(0, 3) + " " + args.postcode.slice(3));<br /> }<br /> },<br /> vanityMode : true<br /> });<br /></script>
The Autoaddress jQuery plugin can be configured / toggled to search for addresses in different countries. To switch countries you just need to configure the country property as seen below.
<code class=" hljs javascript"><script type="text/javascript">
$(function(){
$("#myDiv").AutoAddress({
key : "YOUR_KEY",
country: "GB",
vanityMode : true,
addressProfile: "Demo5LineV2",
onAddressFound: function (args) {
if (args.postalAddress) {
$.each(args.postalAddress, function (index, value) {
$('#addressLine' + (index + 1)).val(value);
});
}
}
});
});
</script>
For scenarios where the response includes residential and commercial results, you have the option to hide the commercial options and only display the residential options. This can be be achieved by setting displayBusinessListings to false.
<code class="hljs language-html"><script type="text/javascript">
$(function(){
$("#myDiv").AutoAddress({
key : "YOUR_KEY",
vanityMode : true,
addressProfile: "Demo5LineV2",
displayBusinessListings : false
});
});
</script>
Using the onAddressFound(data) Callback, you can use the response data to auto-populate a sample form.
The Autoaddress jQuery Plugin can also search in Postally Compliant mode. To switch the control to search for Postal Addresses you just need to configure the vanityMode property to set to false and use the postalAddress in the response.
<code class=" hljs javascript"><script type="text/javascript">
$(function(){
$("#myDiv").AutoAddress({
key : "YOUR_KEY",
vanityMode: false,
addressProfile: "Demo5LineV2"<br /> onAddressFound: function (<strong><a href="/en-ie/support/developer-centre/api/find-address" sfref="[f669d9a7-009d-4d83-ddaa-000000000002]3f75467a-3b6a-6e53-8fda-ff0000b6b9f2">data</a></strong>) {
if (data.postalAddress) {
$.each(data.postalAddress, function (index, value) {
$('#addressLine' + (index + 1)).val(value);
});
}
if (data.postcode) {
$('#postcode').val(data.postcode);
}
}
});
});
</script>
Using the onAddressFound(data) Callback, you can use the response data to auto-populate a sample form.
The Autoaddress jQuery Plugin can also search in Geographic Address mode. To switch the control to search for Geographic Addresses you just need to configure the geographicAddress property to set to true and use the geographicAddress in the response.
<code class=" hljs javascript"><script type="text/javascript">
$(function(){
$("#myDiv").AutoAddress({
key : "YOUR_KEY",
geographicAddress: true,
vanityMode: false,
addressProfile: "Demo5LineV2"<br /> onAddressFound: function (<strong><a href="/en-ie/support/developer-centre/api/find-address" sfref="[f669d9a7-009d-4d83-ddaa-000000000002]3f75467a-3b6a-6e53-8fda-ff0000b6b9f2">data</a></strong>) {
if (data.geographicAddress) {
$.each(data.geographicAddress, function (index, value) {
$('#addressLine' + (index + 1)).val(value);
});
}
if (data.postcode) {
$('#postcode').val(data.postcode);
}
}
});
});
</script>