Javascript Autocomplete Address Using PHP With Demo

Javascript Autocomplete function is called on the key-up event of the php autocomplete input textbox from database. This function requests PHP server side for the list of area location for countries via jquery AJAX.

Javascript Autocomplete Address Form With Demo

	<script>
		var placeSearch, autocomplete;
		var componentForm = {
			street_number: 'short_name',
			route: 'long_name',
			locality: 'long_name',
			administrative_area_level_1: 'short_name',
			country: 'long_name',
			postal_code: 'short_name'
		};

		function initAutocomplete() {
			autocomplete = new google.maps.places.Autocomplete(
				(document.getElementById('autocomplete')), {
					types: ['geocode']
				});
			autocomplete.addListener('place_changed', getAllAreaLocation);
		}

		function getAllAreaLocation() {
			var location_area = autocomplete.getPlace();
			for (var component in componentForm) {
				document.getElementById(component).value = '';
				document.getElementById(component).disabled = false;
			}
			for (var i = 0; i < location_area.address_components.length; i++) {
				var addressType = location_area.address_components[i].types[0];
				if (componentForm[addressType]) {
					var val = location_area.address_components[i][componentForm[addressType]];
					document.getElementById(addressType).value = val;
				}
			}
		}

		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());
				});
			}
		}
	</script>

Also Read: Ajax Autocomplete Search using jQuery with PHP MySQLi

HTML Code

<body>

	<div id="locationField">
		<input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text"></input>
	</div>
	<br>
	<br>
	<table id="address" class="w3-table-all">
		<tr>
			<td class="label">Street address</td>
			<td class="nonstopLocation"><input class="field" id="street_number" disabled="true"></input>
			</td>
			<td class="wellLocation" colspan="2"><input class="field" id="route" disabled="true"></input>
			</td>
		</tr>
		<tr>
			<td class="label">City</td>
			<td class="wellLocation" colspan="3"><input class="field" id="locality" disabled="true"></input>
			</td>
		</tr>
		<tr>
			<td class="label">State</td>
			<td class="nonstopLocation"><input class="field" id="administrative_area_level_1" disabled="true"></input>
			</td>
			<td class="label">Zip code</td>
			<td class="wellLocation"><input class="field" id="postal_code" disabled="true"></input>
			</td>
		</tr>
		<tr>
			<td class="label">Country</td>
			<td class="wellLocation" colspan="3"><input class="field" id="country" disabled="true"></input>
			</td>
		</tr>
	</table>
	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCg4rES-cHvkyowz2QjYSS1aQi1vBJaYYM&libraries=places&callback=initAutocomplete" async defer></script>
</body>

Also Read: Bootstrap Autocomplete Search Box / textbox in PHP MySQL

Read Also:  PHP Autocomplete Textbox using jQuery Example

php autocomplete using JavaScript API


index.html

<!DOCTYPE html>
<html>
<body>

	<div id="locationField">
		<input id="autocomplete" placeholder="Enter your Current address" onFocus="geolocate()" type="text"></input>
	</div>
	<br>
	<br>
	<table id="address" class="w3-table-all">
		<tr>
			<td class="label">Street address</td>
			<td class="nonstopLocation"><input class="field" id="street_number" disabled="true"></input>
			</td>
			<td class="wellLocation" colspan="2"><input class="field" id="route" disabled="true"></input>
			</td>
		</tr>
		<tr>
			<td class="label">Your City</td>
			<td class="wellLocation" colspan="3"><input class="field" id="locality" disabled="true"></input>
			</td>
		</tr>
		<tr>
			<td class="label">Your State</td>
			<td class="nonstopLocation"><input class="field" id="administrative_area_level_1" disabled="true"></input>
			</td>
			<td class="label">Your Zip code</td>
			<td class="wellLocation"><input class="field" id="postal_code" disabled="true"></input>
			</td>
		</tr>
		<tr>
			<td class="label">Country</td>
			<td class="getAllAreaLocation" colspan="3"><input class="field" id="country" disabled="true"></input>
			</td>
		</tr>
	</table>
	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCg4rES-cHvkyowz2QjYSS1aQi1vBJaYYM&libraries=places&callback=initAutocomplete" async defer></script>
	<script>
		var placeSearch, autocomplete;
		var componentForm = {
			street_number: 'short_name',
			route: 'long_name',
			locality: 'long_name',
			administrative_area_level_1: 'short_name',
			country: 'long_name',
			postal_code: 'short_name'
		};

		function initAutocomplete() {
			autocomplete = new google.maps.places.Autocomplete(
				(document.getElementById('autocomplete')), {
					types: ['geocode']
				});
			autocomplete.addListener('place_changed', getAllAreaLocation);
		}

		function getAllAreaLocation() {
			var location_area = autocomplete.getPlace();
			for (var component in componentForm) {
				document.getElementById(component).value = '';
				document.getElementById(component).disabled = false;
			}
			for (var i = 0; i < location_area.address_components.length; i++) {
				var addressType = location_area.address_components[i].types[0];
				if (componentForm[addressType]) {
					var val = location_area.address_components[i][componentForm[addressType]];
					document.getElementById(addressType).value = val;
				}
			}
		}

		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());
				});
			}
		}
	</script>
</body>
</html>