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

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>


Related FAQ

Here are some more FAQ related to this Article:

  1.   Custom Helper Functions in Laravel 6 Example
  2.   how to upload multiple images in codeigniter?
  3.   Dynamic Autocomplete Textbox in jQuery Ajax
  4.   Jquery Fancybox Popup Simple Example
  5.   Google Like Autosuggest Search Using PHP Ajax
  6.   PHP Autocomplete search with typeahead.js
  7.   Create First WordPress Plugin Step by Step for Beginners
  8.   jquery replace newline with br Example - Convert new lines to br - nl2br function
  9.   AngularJS Search Auto Suggestion box with PHP MySQLi
  10.   PHP MySQL ajax Autocomplete Live Search Box in jQuery