.d8888b.  8888888888 .d88888b.   .d8888b.   .d88888b.  8888888b. 8888888 8888888888 Y88b   d88P 
d88P  Y88b 888       d88P" "Y88b d88P  Y88b d88P" "Y88b 888  "Y88b  888   888         Y88b d88P  
888    888 888       888     888 888    888 888     888 888    888  888   888          Y88o88P   
888        8888888   888     888 888        888     888 888    888  888   8888888       Y888P    
888  88888 888       888     888 888        888     888 888    888  888   888            888     
888    888 888       888     888 888    888 888     888 888    888  888   888            888     
Y88b  d88P 888       Y88b. .d88P Y88b  d88P Y88b. .d88P 888  .d88P  888   888            888     
 "Y8888P88 8888888888 "Y88888P"   "Y8888P"   "Y88888P"  8888888P" 8888888 888            888     
                                                                                     

Autocomplete for address searches

Demonstration

http://datadesk.github.com/jquery-geocodify/

Getting Started

01. Add an empty form to your page’s body

<form id="geocoder"></form>

02. Import all the dependencies in your page’s head

<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.4.4/jquery.min.js"></script> 
<script type="text/javascript" src="https://raw.github.com/datadesk/jquery-geocodify/master/jquery.geocodify.js"></script>

03. Initialize the form in your head, and tell it what function to run when the user selects an address

 $(document).ready(function() {
    $("#geocoder").geocodify({
        onSelect: function (ele) { console.log(ele); }
    });
});

The example above will just log the selected address to the browser’s console. It’s a JavaScript representation of what is returned by the Google Maps geocoder.

You can do a lot more than that. Your onSelect function could jump the user to another page, or update a map on that same page, like this demo.

Credits

This library was inspired by the work of the Chicago Tribune News Applications Team.