How to get Started

Follow the instructions on this page to easily get the Autoaddress jQuery Control up and running on your webpage. Starting with basic requirements for the control, and step-by-step instructions to install.


Requirements

  • jQuery 1.7.2 or newer included on your page
  • Ability to add the Autoaddress JS & CSS file to your page
  • Ability to add script to your page to initialise the plugin
  • Autoaddresss Licence Key – for a free key contact us

 



Adding Required Files

The following two files need to be added to your page to get the control up and running.

<!-- Latest compiled and minified CSS -->
<link href="https://api.autoaddress.ie/2.0/control/css/autoaddress.min.css" rel="stylesheet"/>

<!-- Latest compiled and minified JavaScript -->
<script src="https://api.autoaddress.ie/2.0/control/js/jquery.autoaddress.min.js"></script>
Important : Don't forget to also have your jQuery file included on the page, and loaded before the Autoaddress javascript file.

Initialising the plugin

Step 1 : Decide where you would like to place the plugin, then add an empty <div>
<div id="myDiv"></div>
Step 2 : Initialise Autoaddress jQuery Plugin on your empty <div> element/id.
IMPORTANT: ​The key parameter name must be all lower case.
<script type="text/javascript">
    $(function() {
         $("#myDiv").AutoAddress({
             key : "YOUR_KEY",
             vanityMode : true,
             addressProfile : "Demo5LineV2",
             country : "ie",
             language : "en"
         });
     });
</script>   
Important : Replace "YOUR_KEY" with your license key which you were provided or Contact us to receive a key.
Step 3 : Ensure Vanity Mode is set to ‘true’ to ensure that your search returns and can display the preferred address (the most commonly used version of that address).  

The Autoaddress jQuery Plugin is now and up and running on your page, you can now change the configuration, add extra logic in the callback events or change the ​styling to suit your needs !

Step 4 : Supply your address profile. The address profile will define how your address is presented based on your profile's rules.

​Below are examples of the same address using different Address Profiles.

ap1v2
AutoaddressProfileV2
ap3v2

Demo5LineV1

Demo5LineV2

Demo5LineV3


Full HTML Example

The resulting page layout should be like the following :

<!DOCTYPE html> 
<html> 
<head> 
<!-- Add Latest compiled and minified Autoaddress CSS --> 
<link href="https://api.autoaddress.ie/2.0/control/css/autoaddress.min.css" rel="stylesheet"/> 
</head> 
<body> 
<!-- Add placeholder div to your page to place the plugin --> 
<div id="myDiv"></div>  

<!-- Add jQuery to your page --> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Add Latest compiled and minified Autoaddress JS -->  
<script src="https://api.autoaddress.ie/2.0/control/js/jquery.autoaddress.min.js"></script>

<!-- Initialise the Autoaddress Plugin --> 
<script type="text/javascript"> 
   $(function(){
      $("#myDiv").AutoAddress({ 
         key : "YOUR_KEY" ,
         vanityMode : true,
         addressProfile : "Demo5LineV2",
         country : "ie",
         language : "en"
      }); 
   });
</script>
</body> 
</html>

You are ready !

The AutoAddress jQuery Plugin is now ready for searching on your webpage

 

Now its time to :