Skip to Content

addressAutocomplete()

Use the Google Maps Geocoding API to autocomplete address forms.

JavaScript July 2, 2019

Usage

JavaScript
nebula.addressAutocomplete(autocompleteInput, uniqueID)

Parameters

autocompleteInput
(Required) (Selector) The selector for the input field
Default: None

uniqueID
(Optional) (String) The unique name of this autocomplete variable
Default: None

Parameter Notes

The uniqueID parameter should have the same restrictions as a variable name (no spaces).

Request or provide clarification »

Examples

JavaScript
nebula.addressAutocomplete('#address-street', 'exampleAddress');

jQuery(document).on('nebula_address_selected', function(e, place, simplePlace, element){
    var street = simplePlace.street.full || simplePlace.street.name;
    element.val(street).trigger('keyup').on('blur change', function(){
        jQuery(this).val(street).off('keyup blur change').trigger('keyup'); //Add this to the autocomplete field so it doesn't get overridden on blur.
    });

    jQuery('#address-city').val(simplePlace.city).focus().blur();
    jQuery('#address-state').val(simplePlace.state.abbr).focus().blur();
    jQuery('#address-zip').val(simplePlace.zip.code).focus().blur();
    jQuery('#address-country').val(simplePlace.country.name).focus().blur();

    //Showing available address components for this example.
    console.log('Available Nebula Address Components:');
    console.debug(nebula.user.address);
});

Demo


Start typing your address and autocomplete results will appear.

Additional Notes

Note that this requires a paid API key for Google Maps to work. Otherwise the user will be presented with an alert message when filling it out.

 

Updates the nebula.user.address object and then triggers nebula_address_selected (which passes the event, raw place object, sanitized place object, and input field jQuery Object as parameters).

Note: If the same uniqueID is used more than once, only the last reference will work (and previous Autocomplete address fields will stop working).

Source File

Located in /assets/js/nebula.js on line 3002.

Note: This function contains 1 to-do comment.

JavaScript
nebula.addressAutocomplete = function(autocompleteInput, uniqueID){
    if ( jQuery(autocompleteInput).length && jQuery(autocompleteInput).is('input') ){ //If the addressAutocomplete ID exists
        if ( !uniqueID ){
            uniqueID = 'unnamed';
        }

        if ( typeof google !== "undefined" && nebula.has(google, 'maps') ){ //@todo "Nebula" 0: Replace with optional chaining
            nebula.googleAddressAutocompleteCallback(autocompleteInput, uniqueID);
        } else {
            //Log all instances to be called after the maps JS library is loaded. This prevents the library from being loaded multiple times.
            if ( typeof autocompleteInputs === 'undefined' ){
                var autocompleteInputs = {};
            }
            autocompleteInputs[uniqueID] = autocompleteInput;

            nebula.debounce(function(){
                nebula.loadJS('https://www.google.com/jsapi?key=' + nebula.site.options.nebula_google_browser_api_key, function(){ //May not need key here, but just to be safe.
                    google.load('maps', '3', {
                        other_params: 'libraries=places&key=' + nebula.site.options.nebula_google_browser_api_key,
                        callback: function(){
                            jQuery.each(autocompleteInputs, function(uniqueID, input){
                                nebula.googleAddressAutocompleteCallback(input, uniqueID);
                            });
                        }
                    });
                });
            }, 100, 'google maps script load');
        }
    }
};

Override

To override or disable this JavaScript function, simply redeclare it with the exact same function name.

JavaScript
nebula.addressAutocomplete = function(autocompleteInput, uniqueID){
    //Write your own code here, leave it blank, or return false.
}