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

Read Also:  AngularJS Search Auto Suggestion box 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. Read Also:  javascript GET Load data from json file
  2. Read Also:  Dynamic Autocomplete Textbox in jQuery Ajax
  3. Read Also:  Autocomplete Textbox using jQuery, PHP and MySQLi
  4. Read Also:  How to validate phone numbers with PHP?
  5. Read Also:  PHP Autocomplete Input tags with Dynamic Data using jquery Ajax
  6. Read Also:  PHP Autocomplete Textbox using jQuery Example
  7. Read Also:  Fatal error: Call to undefined function sqlsrv_connect()
  8. Read Also:  How to Auto Calculate form field in Javascript?
  9. Read Also:  how to get raw query in codeigniter
  10. Read Also:  How to Create Flexify Image using PHP
CLOSEX