Skip to content

This is a jQuery plugin that shows how Ziptastic could be used.

License

Notifications You must be signed in to change notification settings

Ziptastic/ziptastic-jquery-plugin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

41 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Official Ziptastic jQuery plugin!

Ziptsatic Logo

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"
}