Field for ZIP and CITY autocomplete WordPress

Sébastien | French WordpressDesigner answers:

paste the html in the file you use your form

paste the css in a file autocomplete.css and paste this file in your theme folder
paste the js in a file autocomplete.js and paste this file in your theme folder

and use wp_enqueue_style and wp_enqueue_script to use your js and your css


here two links to understand how use wp_enqueue_style and wp_enqueue_script
[[LINK href="https://codex.wordpress.org/Function_Reference/wp_enqueue_style"]]https://codex.wordpress.org/Function_Reference/wp_enqueue_style[[/LINK]]
[[LINK href="https://codex.wordpress.org/Function_Reference/wp_enqueue_script"]]https://codex.wordpress.org/Function_Reference/wp_enqueue_script[[/LINK]]

so, in functions.php paste this code :
function autocomplete() {
wp_register_style( 'my_style_autocomplete', bloginfo('template_url') . '/autocomplete.css' );
wp_register_script( 'my_script_autocomplete', bloginfo('template_url') . '/autocomplete.js' );
wp_enqueue_style( 'my_style_autocomplete' );
wp_enqueue_script( 'my_script_autocomplete' );
}
add_action('wp_enqueue_scripts','autocomplete');

Test and tell me if it's ok for you :)

---

timDesain Nanang answers:

1. put the following code into theme's functions.php (tested and working):

add_shortcode('gauto', 'wpq11327_gauto');
function wpq11327_gauto( $atts, $content = null ) {
?>
<div id="locationField">
<input id="location" placeholder="Enter Region or Zip Code" onFocus="geolocate()" type="text"></input>
</div>

<table id="address" >
<tr>
<td class="label">City</td>
<td class="wideField"><input class="field" id="locality" disabled="true"></input></td>
</tr>
<tr>
<td class="label">State</td>
<td class="slimField"><input class="field" id="administrative_area_level_1" disabled="true"></input></td>
</tr>
<tr>
<td class="label">Zip code</td>
<td class="wideField"><input class="field" id="postal_code" disabled="true"></input></td>
</tr>
<tr>
<td class="label">Country</td>
<td class="wideField"><input class="field" id="country" disabled="true"></input></td>
</tr>
</table>
<?php
}

add_action('wp_footer', 'wpq11327_wp_head');
function wpq11327_wp_head() {
?>
<style>
#locationField{ position: relative; height: 30px;width: 480px; }
#location { position: absolute; top: 0px; left: 0px; width: 400px; }
#address { max-width: 400px; }
</style>
<?php
}

add_action('wp_footer', 'wpq11327_wp_footer');
function wpq11327_wp_footer() {
?>
<script type="text/javascript">
// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.

var placeSearch, autocomplete;
var componentForm = {
locality: 'long_name',
administrative_area_level_1: 'short_name',
country: 'long_name',
postal_code: 'short_name'
};
var input = document.getElementById('location');
var options = {
componentRestrictions: {'country':'ch'},
types: ['(regions)'] // (cities)
};

function initAutocomplete() {
// Create the autocomplete object, restricting the search to geographical
// location types.
autocomplete = new google.maps.places.Autocomplete(input,options);

// When the user selects an address from the dropdown, populate the address
// fields in the form.
autocomplete.addListener('place_changed', fillInAddress);
}

// [START region_fillform]
function fillInAddress() {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();

for (var component in componentForm) {
document.getElementById(component).value = '';
document.getElementById(component).disabled = false;
}

// Get each component of the address from the place details
// and fill the corresponding field on the form.
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
if (componentForm[addressType]) {
var val = place.address_components[i][componentForm[addressType]];
document.getElementById(addressType).value = val;
}
}
}
// [END region_fillform]

// [START region_geolocation]
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var geolocation = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var circle = new google.maps.Circle({
center: geolocation,
radius: position.coords.accuracy
});
autocomplete.setBounds(circle.getBounds());
});
}
}
// [END region_geolocation]
</script>
<script src="https://maps.googleapis.com/maps/api/js?signed_in=true&libraries=places&callback=initAutocomplete" async defer></script>
<?php
}


ref: https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform

2. put the shortcode: [gauto] in the editor or <?php echo do_shortcode('[gauto]');?> into template file.

---