Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Field for ZIP and CITY autocomplete WordPress

Please help me adapt this below working sample for Wordpress: [[LINK href="http://codepen.io/anon/pen/qdoMwZ"]]http://codepen.io/anon/pen/qdoMwZ[[/LINK]]

I need the corresponding PHP and JS working and tested code for Wordpress.

Thanks



Answers (2)

2015-08-15

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 :)


pinic comments:

Hello Sébastien,
I don't think this works. Have you really tested it?
I think the JS needs adaptation for WP as I already tried it before and it returned errors.
Merci tout de même pour l'aide!
Christophe

2015-08-16

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.


timDesain Nanang comments:

or put the following code into template file:

<form>
<input type="text" id="location" placeholder="Enter Region or Zip Code" onFocus="geolocate()" />

<input type="hidden" id="locality" />
<input type="hidden" id="administrative_area_level_1" />
<input type="hidden" id="postal_code" />
<input type="hidden" id="country" />

<input type="submit" value="Go" />
</form>