How to Integrate Global Address Complete into Multiple Input Fields

Introduction

In this guide, we will explain how to leverage Service Objects’ Global Address Complete web service in multiple places on a single web form. This will allow the type-ahead functionality to be built into different address fields such as a shipping and billing address. Once you have followed the quick integration guide on our website, the additional code required to leverage Global Address Complete on another field is minimal. This guide will take you through the necessary steps to get up and running.

What is Global Address Complete and why does it matter?

Order forms are generally separated into shipping and billing addresses to allow the end-user to provide different inputs for each. By integrating Global Address Complete into the separate address fields, the ease of entry is extended throughout your order form.

How to integrate

Example Website – We will be adding Global Address Complete to the shipping and billing address fields in the following sample web site:

 

Input Fields – The input text fields are setup as search bars

The two input text fields will allow your end users to type in the beginning of an address and have potential address options recommended to them.

 

Billing and Shipping Fields – The output data will be mapped to these output labels

 

Include Files – Add references to the CSS and JavaScript files

CSS

 JavaScript

 

Field Mapping – Map the fields on your html page to the fields in the included JavaScript

The field mapping is nearly identical to a single-input integration with the only key difference being the second set of mapped fields.

 

Options – Within the same field mapping script tag, add your license key, options, and instantiate the two DOTSGlobalAddressComplete objects.

 

Shipping Input in Action – Selecting an address from the type-ahead bar will populate your individual shipping address fields:

Upon selecting an address from the drop down, the mapped outputs are populated. For more information on what fields are mappable, visit our Developer Guide.

The Complete Package – Shipping and Billing address completion are in place after a few simple field mappings and object instantiations.

Summing it up

The use case example in this guide shows how you can implement the type-ahead functionality of our Global Address Complete web service in multiple places on a single web form, based on the coding guidelines from our quick integration guide. This example can be modified to suit your own business applications, and demonstrate how you can adapt this to your own web forms.

Finally, remember that our technical support is as close as a phone call or online request. Contact us anytime, and best of success with your own implementation!

New resources, straight to your inbox

Get updates on the latest industry trends, tips, and news.