Getting Started

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

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.

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>

Related Articles