Usage
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).
Examples
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/modules/location.js on line 6.
No Hooks
This function does not have any filters or actions available. Request one?nebula.addressAutocomplete = function(autocompleteInput, uniqueID = 'unnamed'){
if ( jQuery(autocompleteInput).length && jQuery(autocompleteInput).is('input') ){ //If the addressAutocomplete ID exists
if ( typeof google === 'object' && google?.maps ){
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 !== 'object' ){
var autocompleteInputs = {}; //Cannot use let here (scope?)
}
autocompleteInputs[uniqueID] = autocompleteInput;
nebula.debounce(function(){
nebula.loadJS('https://www.google.com/jsapi?key=' + nebula.site.options.nebula_google_browser_api_key, 'google-maps').then(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. Remember: Some functionality is conditionally loaded via dynamic imports, so if your function is not overriding properly, try listening for a DOM event (described below).
For non-module import functions:
nebula.addressAutocomplete = function(autocompleteInput, uniqueID){
//Write your own code here, leave it blank, or return false.
}
For dynamically imported module function overrides:
jQuery(window).on('load', function(){
nebula.addressAutocomplete = function(autocompleteInput, uniqueID){
//Write your own code here, leave it blank, or return false.
}
});
Custom Nebula DOM events do also exist, so you could also try the following if the Window Load listener does not work:
jQuery(document).on('nebula_module_loaded', function(module){
//Note that the module variable is also available to know which module specifically was imported
if ( typeof nebula.addressAutocomplete === 'function' ){
nebula.addressAutocomplete = function(autocompleteInput, uniqueID){
//Write your own code here, leave it blank, or return false.
}
}
});