Official Ziptastic jQuery plugin!
Seamlessly integrate Ziptastic! with jQuery
Usage
Standalone Lookup
Can be used to query for a specific zip code.
$.ziptastic('US', 48867, 'your-api-key-here', function(country, state, stateCode, city, zip) {
console.log(country, state, stateCode, city, zip);
});Input Keyup Wrapper with forward geocoding (postal code)
var duration = 500;
var elements = {
country: $('#country'),
state: $('#state'),
state_short: $('#state-short'),
city: $('#city'),
zip: $('#zip')
}
// Initially hide the city/state/zip
elements.country.parent().hide();
elements.state.parent().hide();
elements.state_short.parent().hide();
elements.city.parent().hide();
var options = {
"key": "<your-api-key-here>",
"country": "US"
}
elements.zip.ziptastic(options)
.on('zipChange', function(evt, country, state, state_short, city, zip) {
// Country
elements.country.val(country).parent().show(duration);
// State
elements.state_short.val(state_short).parent().show(duration);
elements.state.val(state).parent().show(duration);
// City
elements.city.val(city).parent().show(duration);
});
});Using Reverse Geocoding
Just set reverseGeo to true in the options object.
var options = {
"key": "<your-api-key-here>",
"reverseGeo": true,
"country": "US"
}