Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ziptastic/ziptastic-jquery-plugin

This is a jQuery plugin that shows how Ziptastic could be used.
https://github.com/ziptastic/ziptastic-jquery-plugin

forms forward forward-geocoding geocode geocoding gis html javascript jquery jquery-plugin postal-code reverse reverse-geocode reverse-geocoding zipcode zipcodes ziptastic ziptastic-jquery-plugin

Last synced: about 1 month ago
JSON representation

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

Awesome Lists containing this project

README

        

# Official Ziptastic jQuery plugin!
[![Ziptsatic Logo](https://www.getziptastic.com/static/images/ziptastic-logo.png)](https://www.getziptastic.com)

Seamlessly integrate [Ziptastic!](https://www.getziptastic.com) with jQuery

## Usage

#### Standalone Lookup

Can be used to query for a specific zip code.

```js
$.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)

```js
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": "",
"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.

```js
var options = {
"key": "",
"reverseGeo": true,
"country": "US"
}
```