jQuery SLAP Example

Verify addresses from a single line of input using LiveAddress API with jQuery. Automatically parses the address into components.

by gorebash

HTML

<div id="wrapper">
    <p><b><u>SmartyStreets demo</u></b></p>        
    <p>Fill in the "js_api_token" variable with your own HTML identifier, then type an address in the line below to see how single-line address processing (SLAP) works. <small><i>(Make sure <b>fiddle.jshell.net</b> is in your list of authorized domains.)</i></small></p>
    <br>
    
    <form id="singleLineDemo">
        <input type="text" id="addr">
        zip: <input type="text" id="zip" />
        <br><br>
        <input type="submit" value="Perform SLAP">
    </form>
    
    <div id="address"></div>
    <div id="results"></div>
</div>

CSS

#wrapper { width: 80%; margin: 50px auto; }
input { font-size: 16px; padding: 5px; }
input[type=text] { width: 95%; }
form { text-align: center; margin-bottom: 2em; }
#address { font: 14px/1.5em sans-serif; }
p { margin: 5px 0px; }
#results {
    margin-top: 3em;
    background: #CCC;
    text-shadow: 0px 1px 0px white;
    white-space: pre;
    padding: 10px;
    font: 12px/1.5em Monaco, 'Lucida Grande', 'Courier New', serif;
}

JavaScript

/**
 Single-Line Address Processing (SLAP) Demo
 By SmartyStreets
 
 LiveAddress API: http://smartystreets.com/products/liveaddress-api
 
 Attempts to parse a single-line (freeform)
 address and split into its components. When
 the whole address is passed into the
 "street" field, LiveAddress will automatically
 attempt to parse the pieces of the address
 and will usually be able to return valid results.
 */

var js_api_token = '29816205';

// The base URL of the request (JSONP will be appended later)
var base = 'https://api.qualifiedaddress.com/street-address/?auth-token=' + js_api_token;


function suppress(event) {
    // Used to prevent form submission
    if (!event) return false;
    if (event.preventDefault) event.preventDefault();
    if (event.stopPropagation) event.stopPropagation();
    if (event.cancelBubble) event.cancelBubble = true;
    return false;
}

$(function() {
    $('#singleLineDemo').submit(function(event) {
        var addr = {
            street: $('#addr').val()
        };

        $.ajax({
            url: base,
            data: addr,
            dataType: 'jsonp',
            success: function(response) {
                if (response.length > 0) {
                    $('#results').html(JSON.stringify(response, null, '    '));
                    $('#address').html(response[0].delivery_line_1 + "<br>" + response[0].last_line);
                }
                else {
                    $('#address').html('No valid matches found. Please make sure a city & state OR a zip code was provided with the street address.');
                    $('#results').empty();
                }
            }
        });

        return suppress(event);
    });
});