/
index.html
86 lines (80 loc) · 2.24 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html>
<head>
<title>Zipcode Lookup Demo</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.js"></script>
<style>
input, label, select {
display: block;
width: 100%;
margin: 0;
width: 150px;
}
body {
background-color: #eee;
}
</style>
</head>
<body>
<p>Enter your zipcode and watch the city and state appear magically!</p>
<form>
<label for="zip">Zip:</label>
<input id="zip" name="zip"/>
<label for="city">City:</label>
<div id="city_wrap"><input id="city" name="city"/></div>
<label for="state">State:</label>
<input id="state" name="state"/>
</form>
<p><a href="http://kovalent.co/blog/zip-code-to-city-state-lookup">Read more at the Kovalent blog.</a></p>
<script>
$(document).ready(function(){
//when the user clicks off of the zip field:
$('#zip').keyup(function(){
if($(this).val().length == 5){
var zip = $(this).val();
var city = '';
var state = '';
//make a request to the google geocode api
$.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+zip)
.success(function(response){
//find the city and state
var address_components = response.results[0].address_components;
$.each(address_components, function(index, component){
var types = component.types;
$.each(types, function(index, type){
if(type == 'locality') {
city = component.long_name;
}
if(type == 'administrative_area_level_1') {
state = component.short_name;
}
});
});
//pre-fill the city and state
var cities = response.results[0].postcode_localities;
if(cities) {
//turn city into a dropdown if necessary
var $select = $(document.createElement('select'));
console.log(cities);
$.each(cities, function(index, locality){
var $option = $(document.createElement('option'));
$option.html(locality);
$option.attr('value',locality);
if(city == locality) {
$option.attr('selected','selected');
}
$select.append($option);
});
$select.attr('id','city');
$('#city_wrap').html($select);
} else {
$('#city').val(city);
}
$('#state').val(state);
});
}
});
});
</script>
</body>
</html>