Simple jQuery.ajax call to Esri geocoder

by dbouwman

HTML

<input type="text" id="search-textbox" placeholder="Enter Address or Place Name..."
value='518 Smith st Fort Collins'>
<button id="search-button"><div id="search-icon" class="entypo-search "></div>

</button>
<div id="list"></div>

CSS

@import url(http://weloveiconfonts.com/api/?family=entypo);
/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;

}
.spin {
    -webkit-animation-name: spinnerRotate;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}

@-webkit-keyframes spinnerRotate {
	from {
		-webkit-transform:rotate(0deg);
	}
	to {
		-webkit-transform:rotate(360deg);
	}
}

JavaScript

var url = 'http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/find';

$(function () {
    $('#search-button').on('click', function () {
        var addy = $('#search-textbox').val();
        $('#search-icon').addClass('spin');
        $.ajax(url, {
            data: {
                text: addy,
                f: 'json',
                outSR:102100
            },
            dataType: 'json',
            success: function (data, status, jqXHR) {
                var foundCount = data.locations.length;

                if (foundCount == 0) {
                    $('#list').html('No location found');
                }
                if (foundCount === 1) {
                    //grab the first element out of the array
                    //and show it's name
                    var loc = data.locations[0];
                    $('#list').html('Found ' + loc.name);
                }
                if (foundCount > 1) {
                    $('#list').html('Found ' + foundCount);
                }
            },
            error: function (jqXHR, status, error) {
                debugger;
            },
            complete: function (jqXHR, status) {
                console.log('Done');
                $('#search-icon').removeClass('spin');
            }
        })
    });
});