luk3thomas/address-lookup.js

## address-lookup.js
;(function($, google, window, document, undefined){

    var pluginName = "addressLookup",
        defaults = {
            "namespace": "al" ,
            "input": "#address-lookup"
        };

    function Plugin(element, options) {
        this.element = element;
        this.options = $.extend({}, defaults, options);
        this._defaults = defaults;
        this._name = pluginName;
        this.init();
    }

    Plugin.prototype.init = function() {

        var selectors = {},
            name = this.options.namespace,
            components = ["results", "address", "link"];

        // populate the components for easy access
        for (var i = 0; i < components.length; i++) {
            component = components[i];
            selectors[component] = {};
            selectors[component].name = name + "-" + component;
            selectors[component].cls = "." + selectors[component].name ;
        };

        // html vars
        var selector = this.options.input,
            container = this.element;

        // update the input box with gmap address
        var updateInput = function(e) {
            e.preventDefault();
            $(selector).val($(this).text());
            clear();
        }

        // remove all addresses
        var clear = function() {
            $(selectors.address.cls).remove();
        }

        // event binding functions
        var events = {
            bind: function(cls, callback) {
                $(cls).on("click", callback);
            },
            unbind: function(cls) {
                $(cls).unbind("click");
            }
        };

        // callback to handle data from google
        var handle = function(addresses) {
            var $form = $(container).find(selectors.results.cls);

            if(!$form.length) {
                $(container).append('<div class="' + selectors.results.name + '">')
            }

            // unbind any click events, then discard elements
            events.unbind(selectors.link.cls);
            clear();

            // add new elements
            for (var i = 0; i < addresses.length; i++) {
                address = addresses[i]
                $form.append([
                '<div class="', selectors.address.name, '">',
                    '<a class="', selectors.link.name, '" href="#">' ,
                        address.formatted_address ,
                    '</a>',
                '</div>'
                ].join(''));
            };

            // bind the new elements
            events.bind(selectors.link.cls, updateInput);
        }

        // google geocoder
        var geocoder = new google.maps.Geocoder();

        // listen for keyboard input
        $(selector).on("keyup", function(d) {
            var query = $(this).val();
            geocoder.geocode({ address: query}, handle);
        });

    }

    $.fn[pluginName] = function(options) {
        return new Plugin(this, options);
    }


})(jQuery, google, window, document);

## index.html
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Google Maps Address Lookup</title>
        <meta name="viewport" content="width=device-width">
        <style>
            #lookup {
                position:absolute;
                left:50%;
                width:600px;
                margin-left:-300px;
                top:100px;
            }
            #lookup input {
                width:100%;
                padding:.5em .8em;
                border:1px solid #eee;
                outline:0;
            }
        </style>

    </head>
    <body>

        <div id="lookup">
            <input type="text" id="address-lookup" placeholder="Address..." autocomplete="off" />
        </div>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"> </script>

        <script src="address-lookup.js"></script>

        <script>
            $("#lookup").addressLookup({
                "input": "#address-lookup"
            })
        </script>
    </body>
</html>
	;(function($, google, window, document, undefined){

	var pluginName = "addressLookup",
	defaults = {
	"namespace": "al" ,
	"input": "#address-lookup"
	};

	function Plugin(element, options) {
	this.element = element;
	this.options = $.extend({}, defaults, options);
	this._defaults = defaults;
	this._name = pluginName;
	this.init();
	}

	Plugin.prototype.init = function() {

	var selectors = {},
	name = this.options.namespace,
	components = ["results", "address", "link"];

	// populate the components for easy access
	for (var i = 0; i < components.length; i++) {
	component = components[i];
	selectors[component] = {};
	selectors[component].name = name + "-" + component;
	selectors[component].cls = "." + selectors[component].name ;
	};

	// html vars
	var selector = this.options.input,
	container = this.element;

	// update the input box with gmap address
	var updateInput = function(e) {
	e.preventDefault();
	$(selector).val($(this).text());
	clear();
	}

	// remove all addresses
	var clear = function() {
	$(selectors.address.cls).remove();
	}

	// event binding functions
	var events = {
	bind: function(cls, callback) {
	$(cls).on("click", callback);
	},
	unbind: function(cls) {
	$(cls).unbind("click");
	}
	};

	// callback to handle data from google
	var handle = function(addresses) {
	var $form = $(container).find(selectors.results.cls);

	if(!$form.length) {
	$(container).append('<div class="' + selectors.results.name + '">')
	}

	// unbind any click events, then discard elements
	events.unbind(selectors.link.cls);
	clear();

	// add new elements
	for (var i = 0; i < addresses.length; i++) {
	address = addresses[i]
	$form.append([
	'<div class="', selectors.address.name, '">',
	'<a class="', selectors.link.name, '" href="#">' ,
	address.formatted_address ,
	'</a>',
	'</div>'
	].join(''));
	};

	// bind the new elements
	events.bind(selectors.link.cls, updateInput);
	}

	// google geocoder
	var geocoder = new google.maps.Geocoder();

	// listen for keyboard input
	$(selector).on("keyup", function(d) {
	var query = $(this).val();
	geocoder.geocode({ address: query}, handle);
	});

	}

	$.fn[pluginName] = function(options) {
	return new Plugin(this, options);
	}


	})(jQuery, google, window, document);
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Google Maps Address Lookup</title>
	<meta name="viewport" content="width=device-width">
	<style>
	#lookup {
	position:absolute;
	left:50%;
	width:600px;
	margin-left:-300px;
	top:100px;
	}
	#lookup input {
	width:100%;
	padding:.5em .8em;
	border:1px solid #eee;
	outline:0;
	}
	</style>

	</head>
	<body>

	<div id="lookup">
	<input type="text" id="address-lookup" placeholder="Address..." autocomplete="off" />
	</div>

	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script>window.jQuery \|\| document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"> </script>

	<script src="address-lookup.js"></script>

	<script>
	$("#lookup").addressLookup({
	"input": "#address-lookup"
	})
	</script>
	</body>
	</html>