Skip to content

Commit c8bd850

Browse files
daspecsterdaspecster
authored
Updates to support Version 3 of GetZiptastic.com API (#27)
* Support version 3 of GetZiptastic.com API. closes #23 - Switch to v3 payload lists - Add Key headers - Make API key message more noticeable. * Update README.md
1 parent 56d5fa3 commit c8bd850

3 files changed

Lines changed: 129 additions & 87 deletions

File tree

‎README.md‎

Lines changed: 34 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,44 @@ Can be used to query for a specific zip code.
1111

1212
```js
1313
$.ziptastic(48867, function(country, state, stateCode, city, zip) {
14-
// Match found.
14+
console.log(country, state, stateCode, city, zip);
1515
});
1616
```
1717

1818
#### Input Keyup Wrapper
1919

2020
```js
21-
$('input.zip')
22-
.ziptastic()
23-
.on('zipChange', function(event, country, state, stateCode, city, zip) {
24-
// Match found.
25-
});
21+
var duration = 500;
22+
23+
var elements = {
24+
country: $('#country'),
25+
state: $('#state'),
26+
state_short: $('#state-short'),
27+
city: $('#city'),
28+
zip: $('#zip')
29+
}
30+
31+
// Initially hide the city/state/zip
32+
elements.country.parent().hide();
33+
elements.state.parent().hide();
34+
elements.state_short.parent().hide();
35+
elements.city.parent().hide();
36+
37+
var options = {
38+
"key": "<your-api-key-here>",
39+
"country": "US"
40+
}
41+
elements.zip.ziptastic(options)
42+
.on('zipChange', function(evt, country, state, state_short, city, zip) {
43+
// Country
44+
elements.country.val(country).parent().show(duration);
45+
46+
// State
47+
elements.state_short.val(state_short).parent().show(duration);
48+
elements.state.val(state).parent().show(duration);
49+
50+
// City
51+
elements.city.val(city).parent().show(duration);
52+
});
53+
});
2654
```

‎demo.html‎

Lines changed: 64 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,81 @@
11
<html>
22
<head>
33
<title>Zip Code Lookup Demo</title>
4-
<style>
5-
form label, form input {
6-
display: block;
7-
}
8-
</style>
4+
<style>
5+
form label, form input {
6+
display: block;
7+
}
8+
</style>
99
</head>
1010
<body>
11-
<form id="theform">
12-
<label for="zip">
13-
Zip:
14-
<input type="text" id="zip" />
15-
</label>
11+
<form id="theform">
12+
<label for="zip">
13+
Zip:
14+
<input type="text" id="zip" />
15+
</label>
1616

17-
<label for="city">
18-
City:
19-
<input type="text" id="city" />
20-
</label>
17+
<label for="city">
18+
City:
19+
<input type="text" id="city" />
20+
</label>
2121

22-
<label for="state">
23-
State:
24-
<input type="text" id="state" />
25-
</label>
22+
<label for="state">
23+
State:
24+
<input type="text" id="state" />
25+
</label>
2626

27-
<label for="state-short">
28-
State Short:
29-
<input type="text" id="state-short" />
30-
</label>
27+
<label for="state-short">
28+
State Short:
29+
<input type="text" id="state-short" />
30+
</label>
3131

32-
<label for="country">
33-
Country:
34-
<input type="text" id="country" />
35-
</label>
32+
<label for="country">
33+
Country:
34+
<input type="text" id="country" />
35+
</label>
3636

37-
<input type="submit" />
38-
</form>
39-
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
40-
<script type="text/javascript" src="jquery.ziptastic.js"></script>
41-
<script type="text/javascript">
42-
(function($) {
43-
$(function() {
44-
var duration = 500;
37+
<input type="submit" />
38+
</form>
39+
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
40+
<script type="text/javascript" src="jquery.ziptastic.js"></script>
41+
<script type="text/javascript">
42+
(function($) {
43+
$(function() {
44+
var duration = 500;
4545

46-
var elements = {
47-
country: $('#country'),
48-
state: $('#state'),
49-
state_short: $('#state-short'),
50-
city: $('#city'),
51-
zip: $('#zip')
52-
}
46+
var elements = {
47+
country: $('#country'),
48+
state: $('#state'),
49+
state_short: $('#state-short'),
50+
city: $('#city'),
51+
zip: $('#zip')
52+
}
5353

54-
// Initially hide the city/state/zip
55-
elements.country.parent().hide();
56-
elements.state.parent().hide();
57-
elements.state_short.parent().hide();
58-
elements.city.parent().hide();
54+
// Initially hide the city/state/zip
55+
elements.country.parent().hide();
56+
elements.state.parent().hide();
57+
elements.state_short.parent().hide();
58+
elements.city.parent().hide();
5959

60-
// Initialize the ziptastic and bind to the change of zip code
61-
elements.zip.ziptastic()
62-
.on('zipChange', function(evt, country, state, state_short, city, zip) {
63-
// Country
64-
elements.country.val(country).parent().show(duration);
60+
// Initialize the ziptastic and bind to the change of zip code
61+
var options = {
62+
"key": "",
63+
"country": "US"
64+
}
65+
elements.zip.ziptastic(options)
66+
.on('zipChange', function(evt, country, state, state_short, city, zip) {
67+
// Country
68+
elements.country.val(country).parent().show(duration);
6569

66-
// State
67-
elements.state_short.val(state_short).parent().show(duration);
68-
elements.state.val(state).parent().show(duration);
70+
// State
71+
elements.state_short.val(state_short).parent().show(duration);
72+
elements.state.val(state).parent().show(duration);
6973

70-
// City
71-
elements.city.val(city).parent().show(duration);
72-
73-
});
74-
});
75-
}(jQuery));
76-
</script>
74+
// City
75+
elements.city.val(city).parent().show(duration);
76+
});
77+
});
78+
}(jQuery));
79+
</script>
7780
</body>
7881
</html>

‎jquery.ziptastic.js‎

Lines changed: 31 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -4,50 +4,61 @@
44
us: /[0-9]{5}(-[0-9]{4})?/
55
};
66

7-
$.ziptastic = function(country, zip, callback){
8-
// If only zip and callback are given default to US
9-
if (arguments.length == 2 && typeof arguments[1] == 'function') {
10-
callback = arguments[1];
11-
zip = arguments[0];
12-
country = 'US';
13-
}
7+
$.ziptastic = function(country, zip, key, callback){
8+
country = country || 'US';
9+
if (!key) {
10+
alert("Please register for an API key at GetZiptastic.com.");
11+
return;
12+
}
1413

1514
country = country.toUpperCase();
16-
// Only make unique requests
1715
if(!requests[country]) {
1816
requests[country] = {};
1917
}
18+
2019
if(!requests[country][zip]) {
2120
var protocol = '';
2221
if (location.protocol == 'file:') {
2322
protocol = 'https://';
2423
} else {
2524
protocol = location.protocol;
2625
}
27-
requests[country][zip] = $.getJSON(protocol + '//zip.getziptastic.com/v2/' + country + '/' + zip);
28-
}
2926

30-
// Bind to the finished request
31-
requests[country][zip].done(function(data) {
32-
if (typeof callback == 'function') {
33-
callback(data.country, data.state, data.state_short, data.city, zip);
34-
}
35-
});
27+
var referrer = document.location.origin + document.location.pathname;
28+
requests[country][zip] = $.ajax({
29+
url: protocol + '//zip.getziptastic.com/v3/' + country + '/' + zip,
30+
headers: {'x-referrer': referrer, 'x-key': key},
31+
contentType: "application/json",
32+
type: 'GET',
33+
dataType: 'json',
34+
success: function(data) { requests[country][zip] = data[0]; },
35+
error: function(e) { console.log('There was an error. ' + e.message ); }
36+
});
37+
38+
// Bind to the finished request
39+
requests[country][zip].done(function(data) {
3640

41+
if (typeof callback == 'function') {
42+
var data_temp = data
43+
var key = Object.keys(data_temp)[0];
44+
45+
requests[country][zip] = data_temp[key];
46+
callback(data_temp[key].country, data_temp[key].state,
47+
data_temp[key].state_short, data_temp[key].city, zip);
48+
}
49+
});
50+
}
3751
// Allow for binding to the deferred object
3852
return requests[country][zip];
3953
};
4054

4155
$.fn.ziptastic = function( options ) {
4256
return this.each(function() {
4357
var ele = $(this);
44-
4558
ele.on('keyup change', function() {
4659
var zip = ele.val();
47-
48-
// TODO Non-US zip codes?
4960
if(zipValid.us.test(zip)) {
50-
$.ziptastic(zip, function(country, state, state_short, city) {
61+
$.ziptastic(options.country, zip, options.key, function(country, state, state_short, city) {
5162
// Trigger the updated information
5263
ele.trigger('zipChange', [country, state, state_short, city, zip]);
5364
});

0 commit comments

Comments
 (0)