REST/JSON + jQuery UI Example

This is an alternate UI option for the LiveAddress API. It makes use of jQuery, jQuery UI, and jQuery Templates in order to query our REST/JSON endpoint.

by Ryan Brackett

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css">
<html>
    <head>
        <title>REST/JSON + jQuery UI Example</title>
    </head>
    <body>
        <form id='address' method="post">
            <div>
                <label for="street">Street</label>
                <input type="text" name="street" id="street" value="1600 amphitheatre parkway">
            </div>

            <div>
                <label for="street2">Street 2</label>
                <input type="text" name="street2" id="street2">
            </div>

            <div>
                <label for="city">City</label>
                <input type="text" name="city" id="city" value="mountain view">
            </div>

            <div>
                <label for="state">State</label>
                <input type="text" name="state" id="state" value="ca">
            </div>

            <div>
                <label for="zip">ZIP Code</label>
                <input type="text" name="zip" id="zip" value="94043">
            </div>

            <input type="submit" id="verify" value="Verify">
        </form>
    
        <div id="dialog" style="display:none;">
            <div id="invalid" style="display:none;">
                This address is not recognized by the USPS.  Are you sure you want to use it?
            </div>
            <div id="candidates"></div>
        </div>
        
        <div id="results" style="display:none;"></div>

        <script type="text/x-jquery-tmpl" id="address-candidate-template">
            {{if user_input}}
            <span class="title">You provided:</span><br />
            {{else candidate_index === 0}}
            <span class="title">We suggest:</span><br />
            {{/if}}
            <div...

CSS

.address-result {
    cursor: pointer;
    margin-bottom: 10px;
    padding: 5px;
}
.address-result:hover {
    background-color: lightgray;
}
.complete-address {
    display: none;
}
.title {
    color: gray;
    font-size: smaller;
    margin-bottom: 12px;
}
#invalid {
    color: red;
    font-size: smaller;
    margin-bottom: 20px;
}

JavaScript

/*

Make sure to register the following domain with your LiveAddress Subscription:

fiddle.jshell.net

This can be done from here (once you're logged in):

https://smartystreets.com/account/api/javascript
            
Also, make sure to insert your Javascript API Access Identifier below as the 'auth-token' value (also found at the link above)!

Then just click the "Run" button above, fill in an address and click "Verify".

NOTE: if you're thinking of using this code on your site, make sure to grab the resources by copying the link addresses in the "Manage Resources" section (to the left).

*/

function suppress(event) {
    if (!event)
        return false;
    if (event.preventDefault)
        event.preventDefault();
    if (event.stopPropagation)
        event.stopPropagation();
    if (event.cancelBubble)
        event.cancelBubble = true;
    return false;
}

$(document).ready(function() {
    $('form#address').submit(function(event) {
        var givenAddress = {
            'user_input': true,
            'delivery_line_1': $('#street').val(),
            'delivery_line_2': $('#street2').val(),
            'last_line' : $('#city').val() + ', ' + $('#state').val() + ' ' + $('#zip').val(),
            'components' : {
                'city': $('#city').val(),
                'zipcode': $('#zip').val(),
                'state_abbreviation': $('#state').val()
            }
        };
        $.ajax({
            type: 'get',
            url: 'https://api.qualifiedaddress.com/street-address/',
            dataType: 'jsonp',
            async: false,
            data: {
                'auth-token': 'YOUR_AUTHENTICATION_TOKEN_OR_HTML_IDENTIFIER',
                'street': givenAddress.delivery_line_1,
                'street2': givenAddress.delivery_line_2,
                'city': givenAddress.components.city,
                'state': givenAddress.components.state_abbreviation,
                'zipCode': givenAddress.components.zipcode,
               ...