Address Auto-Complete Website Integration

Integrating our predictive address finder service to a form on a website has never been easier.

Use JavaScript to quickly get our service running on your site.

Step #1

First, you have to add our JavaScript to your page. We recommend using our CDN link, or you can download the package and host on your own server. The full code is also available on GitHubopen in new window.

Include the JavaScript class at the bottom of your page (before the </html> tag):

<script type="text/javascript" src="https://cc-cdn.com/generic/scripts/v1/cc_c2a.min.js"></script>

Step #2

Create an address form in HTML:

<form method="post" name="address">
   Search For Address:<br/>
   <input type="text" id="search-bar"/><br/><br/>
   Address Line 1:<br/>
   <input type="text" id="address-line-1"/><br/>
   Address Line 2:<br/>
   <input type="text" id="address-line-2"/><br/>
   Postcode:<br/>
   <input type="text" id="address-zip"/><br/>
   Town:<br/>
   <input type="text" id="address-town"/><br/>
   Country:<br/>
   <input type="text" id="address-country"/><br/>
</form>

Step #3

Next add a simple version of our configuration code. We’ll modify this code to set some parameters correctly in a bit.

Add this code below the point where you included our JavaScript class:

<script>
  window.onload = function() {
    new clickToAddress({
        accessToken: 'xxxxx-xxxxx-xxxxx-xxxxx',
        dom: {
            search:     'search-bar',
            town:       'address-town',
            postcode:   'address-zip',
            line_1:     'address-line-1',
            line_2:     'address-line-2',
            country:    'address-country'
        },
        domMode: 'id'
    });
  };
</script>

Note: the wrapping window.onload function can be replaced by a jQuery(document).ready or equivalent solution to make sure that the code only runs once our JavaScript class has loaded.

Step #4

Now you’ll need to decide the most appropriate way for the JavaScript class to find the individual form elements that you want to attach to the Address Finder, and edit your configuration accordingly.

The available options are:

Element IDs
- Set domMode: ‘id’
- Set all the dom elements to the ID of the related form field element.
Element classes
- Set domMode: ‘class’
- Set all the dom elements to the class name of the related form field element.
Element names
- Set domMode: ‘name’
- Note: this is the default setting, so you can skip the domMode line if you wish to.
- Set all the dom elements to contain the name of the related form field element.
Objects (pass the DOM element directly)
- Set domMode: ‘object’
- Set all the dom elements to point to the DOM object for the related form field element. For example, if you use jQuery, you can do:
```
town: jQuery('#myForm .customer-town input')[0],
```
to use jQuery to find the required element, and [0] to return the pure DOM element.

Step #5

Ready!

That’s it! Now the integration should function perfectly.

# Address Auto-Complete Website Integration

# Step #1

# Step #2

# Step #3

# Step #4

# Step #5