JSPM

jquery-ziptastic

1.1.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1
  • Score
    100M100P100Q15235F
  • License MIT

Easy to use jQuery plugin for GetZiptastic.com. Supporting forward and reverse geocoding.

Package Exports

  • jquery-ziptastic

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (jquery-ziptastic) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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