Autocomplete for address searches
Import all the dependencies in your page’s head
<link rel="stylesheet" href="https://raw.github.com/datadesk/jquery-geocodify/master/jquery.geocodify.css" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://raw.github.com/datadesk/jquery-geocodify/master/jquery.geocodify.js"></script>
Add an empty form to your page’s body and initialize it with instructions for what function to run when the user selects an address
<form id="geocoder"></form>
<script type="text/javascript">
$("#geocoder").geocodify({
onSelect: function (result) { alert(result); }
});
</script>
The example above will just alert the selected address in the browser. It’s a JavaScript representation of what is returned by the Google Maps geocoder.
Required arguments
| Option | Use | Default |
|---|---|---|
| onSelect | A function that takes the Google geocoder's result object and decides what to do with it, like it load it on a map, or redirect to another page, or whatever you need. | An ugly alert with the result's address. |
Optional arguments
| Option | Use | Default | |
|---|---|---|---|
| acceptableAddressTypes | A whitelist of address types allowed to appear in the results. Drawn from the set defined by Google's geocoder. | All types accepted | |
| buttonValue | The text that appears in the form's submit button. It can be used to remove the button entirely but submitting false, null or an empty string. | "GO" | |
| errorHandler | A function for handling errors returned by the Google geocoder. | null | |
| filterResults | A function for filtering results before they appear in the dropdown. | null | |
| initialText | Sets a default string to appear when the box loads. | null | |
| minimumCharacters | Sets the number of characters that must be entered before the geocoder starts to automatically run. | 5 | |
| noResultsText | The text that appears when a search returns no results. | "No results found. Please refine your search." | |
| prepSearchString | A function that treats the search string before it is passed to the geocoder. | null | |
| regionBias | Instruct the geocoder to return results biased towards a particular region of the world. More information about the available codes can be found here. | null | |
| viewportBias | Instruct the geocoder to return results biased towards a bounding box presented in Google's data format. Google's documentation can be found here. | null |
Examples of jquery-geocodify in action. Full documentation is elsewhere.
<form id="geocodify-basic-box"></form>
<script type="text/javascript">
$("#geocodify-basic-box").geocodify({
onSelect: function (result) { alert(result); }
});
</script>
The whitelist of acceptable address types can be used to filter the results before they appear in the dropdown. In this example, the form is configured to only return airports. Try searching for “LAX” or “Charles De Gaulle.”
<form id="geocodify-address-type-whitelisting"></form>
<script type="text/javascript">
$("#geocodify-address-type-whitelisting").geocodify({
onSelect: function (result) { alert(result); },
acceptableAddressTypes: [
'airport'
],
minimumCharacters: 3
});
</script>
Geocoder results can be filtered before they appear in the dropdown by passing in a function. It should accept a list of Google geocoder objects and return whatever list you’d like to keep. This example drops any results that aren’t filed in Los Angeles County.
<form id="geocodify-filter-results"></form>
<script type="text/javascript">
$("#geocodify-filter-results").geocodify({
onSelect: function (result) { alert(result); },
filterResults: function(results) {
var filteredResults =[];
$.each(results, function(i,val) {
for (var ac in val.address_components) {
for (var t in val.address_components[ac].types) {
if (val.address_components[ac].types[t] === 'administrative_area_level_2') {
if (val.address_components[ac].long_name === 'Los Angeles') {
filteredResults.push(val);
}
}
}
}
});
return filteredResults;
}
});
</script>
You can provide a string to load when the box first appears.
<form id="geocodify-initial-text"></form>
<script type="text/javascript">
$("#geocodify-initial-text").geocodify({
onSelect: function (result) { alert(result); },
initialText: "Enter an address"
});
</script>
You can provide a string for the dropdown when no results return. Try searching some nonsense like “qwerty.”
<form id="geocodify-no-results-text"></form>
<script type="text/javascript">
$("#geocodify-no-results-text").geocodify({
onSelect: function (result) { alert(result); },
noResultsText: "Nein!"
});
</script>
Sets the number of characters that must be entered before the geocoder starts to automatically run. This example reduces the number to 2. Try searching “LAX.”
<form id="geocodify-minimum-characters"></form>
<script type="text/javascript">
$("#geocodify-minimum-characters").geocodify({
onSelect: function (result) { alert(result); },
minimumCharacters: 2
});
</script>
A function that treats the search string before it is passed to the geocoder. This example adds “California” to the search if the user has no provided it.
<form id="geocodify-prep-search-string"></form>
<script type="text/javascript">
$("#geocodify-prep-search-string").geocodify({
onSelect: function (result) { alert(result); },
prepSearchString: function(query) {
var pattr = /\sca\s|\scalifornia\s/gi;
var match = query.match(pattr);
if (!match) {
return query + ' California';
} else {
return query;
}
}
});
</script>
Instruct the geocoder to return results biased towards a particular region of the world. More information about the available codes can be found here. This example biases results to Spain.
<form id="geocodify-region-bias"></form>
<script type="text/javascript">
$("#geocodify-region-bias").geocodify({
onSelect: function (result) { alert(result); },
regionBias: "ES"
});
</script>
Instruct the geocoder to return results biased towards a bounding box presented in Google’s data format. Google’s documentation can be found here. This example biases results to a box surrounding Los Angeles County.
<form id="geocodify-viewport-bias"></form>
<script type="text/javascript">
$("#geocodify-viewport-bias").geocodify({
onSelect: function (result) { alert(result); },
viewportBias: new google.maps.LatLngBounds(
new google.maps.LatLng(33.22030778968541,-118.948974609375),
new google.maps.LatLng(35.0120020431607,-117.44384765625)
)
});
</script>
This library was created by Ben Welsh of the Los Angeles Times Data Desk. Valuable contributions have been made by albertsun and unruthless. Inspiration was provided by the Chicago Tribune News Applications team.
