Google autocomplete test

Developer
Eddy
Size
2,854 Kb
Views
26,312
  1. Google autocomplete test Previews
  2. Google autocomplete test HTML Codes
  3. Google autocomplete test CSS Codes
  4. Google autocomplete test JS Codes

How do I make an google autocomplete test?

What is a google autocomplete test? How do you make a google autocomplete test? This script and codes were developed by Eddy on 27 August 2022, Saturday.

Google autocomplete test Previews
IQ Test

Google autocomplete test - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Google autocomplete test</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="container"> <input id="google_offline" type="checkbox"></input> <label>Google offline</label> <input id="autocomplete" type="text"></input> <input id="street_number" placeholder="Numéro" type="hidden"></input> <input id="route" placeholder="Rue" type="hidden"></input> <input id="locality" placeholder="Ville" type="hidden"></input> <input id="postal_code" placeholder="Code postal" type="hidden"></input> <input id="country" placeholder="Pays" type="hidden"></input>
<div id="fg"></div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAcyxTnCVDsmuha_N83Jsp05rBlf3ReWDY&signed_in=true&libraries=places&callback=initAutocomplete" async defer></script> <script src="js/index.js"></script>
</body>
</html>

Google autocomplete test - Script Codes CSS Codes

html { background: url('http://fullhdpictures.com/wp-content/uploads/2015/03/Landscape-Wallpapers-2015.png') center center no-repeat fixed; background-size: cover;
}
#container { width: 960px; margin: 150px auto;
}
label { color: white;
}
input[type="text"] { width: 100%; padding: 0.5em; font-size: 1.5em;
}

Google autocomplete test - Script Codes JS Codes

var componentForm = { street_number: 'short_name', route: 'long_name', locality: 'long_name', country: 'long_name', postal_code: 'short_name'
};
function initAutocomplete() { // input to autocomplete var autocompleteElt = document.querySelector('#autocomplete'); // paris gps var frenchBounds = new google.maps.LatLngBounds(new google.maps.LatLng(48.866667, 2.333333)); // build options var options = { types: ['address'], bounds: frenchBounds }; var autocomplete = new google.maps.places.Autocomplete(autocompleteElt, options); // When the user selects an address from the dropdown, populate the address // fields in the form. autocomplete.addListener('place_changed', function () { var place = autocomplete.getPlace(); for (var i = 0; i < place.address_components.length; i++) { var addressType = place.address_components[i].types[0]; if(componentForm[addressType]) { document.getElementById(addressType).value = place.address_components[i][componentForm[addressType]]; } } }); autocompleteElt.addEventListener('input', function () { var frenchBounds = new google.maps.LatLngBounds(new google.maps.LatLng(48.866667, 2.333333)); var service = new google.maps.places.AutocompleteService(); var req = { types: ['address'], bounds: frenchBounds, input: autocompleteElt.value, componentRestrictions: { country: ['fr', 'gp', 'mq', 'gf', 're', 'pm', 'yt', 'nc', 'pf', 'mf', 'tf'] } }; service.getPlacePredictions(req, function(predictions, status) { if(predictions != null){ var place = predictions[0]; console.log(place); var request = { placeId: place.place_id
}; console.log(request); var pservice = new google.maps.places.PlacesService(document.getElementById('fg')); pservice.getDetails(request, function(place, status){ console.log(place); for (var i = 0; i < place.address_components.length; i++) { var addressType = place.address_components[i].types[0]; if(componentForm[addressType]) { document.getElementById(addressType).value = place.address_components[i][componentForm[addressType]]; }
} }); } }); }); autocompleteElt.addEventListener('blur', function () { this.value = document.getElementById('street_number').value + ' ' + document.getElementById('route').value + ', ' + document.getElementById('locality').value + ', ' + document.getElementById('country').value; });
}
document.getElementById('google_offline').addEventListener('change', function(e) { var checked = e.currentTarget.checked; document.getElementById('autocomplete').type = checked ? 'hidden' : 'text'; document.getElementById('street_number').type = checked ? 'text' : 'hidden'; document.getElementById('route').type = checked ? 'text' : 'hidden'; document.getElementById('locality').type = checked ? 'text' : 'hidden'; document.getElementById('postal_code').type = checked ? 'text' : 'hidden'; document.getElementById('country').type = checked ? 'text' : 'hidden';
});
Google autocomplete test - Script Codes
Google autocomplete test - Script Codes
Home Page Home
Developer Eddy
Username emnbdx
Uploaded August 27, 2022
Rating 3
Size 2,854 Kb
Views 26,312
Do you need developer help for Google autocomplete test?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Eddy (emnbdx) Script Codes
Name
Nice social button
Sticky test
HA AAP - help part
HA - story
HA - proto notif
A Pen by Eddy
HA - proto evt widget
LBCA - tile test
Instructables homeslide
HA - radio checkbox mix
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!