Auto Complete City Search Sample Code - PHP Snipplr Social Repository

Revision: 72920

at March 29, 2018 14:35 by Hexasoft

Updated Code

<?php
/********************************************************************************/
/* Description: This codewill demonstrate how to implement the autocomplete search function by using php and ajax.  */
/*              For information, please visit https://www.ip2location.com/      */
/********************************************************************************/
/* You can obtain free IPV6 database at http://www.ip2location.com/free/ipv6 */
?>

<!DOCTYPE html>
<html>
	<head>
		<title>City Search Example Code Auto Complete</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>  
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
	</head>
	<body>
		<br /><br />
		<div class="container" style="width:600px;">
			<h2 align="center">City Search Example Code Auto Complete</h2>
			<br /><br />
			<form action="" method="post">
				<label>Country: </label>
				<?php 
					//connect to database
					$connect = mysqli_connect("localhost", "root", "", "ip2location");
					
					//retrieve countryName based on ipaddress
					
					//Get the visitor IP address
					//$ip = $_SERVER['REMOTE_ADDR'];
					//In case you are testing locally with 127.0.0.1,
					//you can uncomment the below line to assign the IP address
					//to 8.8.8.8 (or whatever) for your testing.
					$ip= "8.8.8.8";
					
					
					// Function to convert IP address (xxx.xxx.xxx.xxx) to IP number (0 to 256^4-1)
					function Dot2LongIP ($ip) {
						if ($ip == ""){
							return 0;
						}else {
							$ips = explode(".", $ip);
							return ($ips[3] + $ips[2] * 256 + $ips[1] * 256 * 256 + $ips[0] * 256 * 256 * 256);
						}
					}
					// Convert IP address to IP number for querying database
					$ipno = Dot2LongIP($ip);
					
					//start to query from database
					$query = 'select DISTINCT country_name,country_code from ip2location_db3lite where "'.$ipno.'"<= ip_to AND ip_from<="'.$ipno.'"';
					$result = mysqli_query($connect, $query);

					//check if query is sucesss
					if(!empty($result)){
						while($row = mysqli_fetch_assoc($result)){
							echo '<label id="country_name">' . $row["country_name"] .'</label>';
							//store country code in a variable for retrieve the region name and city name
							$country_code = $row["country_code"];
						}	
					}
				?>
				<br /><br />
				<label>Region Name:</label>
				<input type="text" name="region" id="region"  class="form-control input-lg" autocomplete="off" placeholder="Type Region Name" />
				<br /><br />
				<label>City Name:</label>
				<input type="text" name="city" id="city" class="form-control input-lg" autocomplete="off" placeholder="Type City Name" />
				<br /><br />
				<input class="btn btn-default" type="submit" value="submit">
			</form>
		</div>
	</body>
</html>

<script>
$(document).ready(function(){
	$('#region').typeahead({
		source: function(query, result){
			//call php variable into javascript by using php print method
			var country = "<?php print($country_code); ?>";
			$.ajax({
				url:"fetch.php",
				method:"POST",
				data:{country_code:country,query:query},
				dataType:"json",
				success:function(data){
					result($.map(data, function(item){
						return item;
					}));
				}
			})
		}
	});
	$('#city').typeahead({
		source: function(query1, result){
			var name = document.getElementById("region").value;
			//call php variable into javascript by using php print method
			var country = "<?php print($country_code); ?>";
			$.ajax({
				url:"fetch.php",
				method:"POST",
				data:{country_code:country,region_name:name,query1:query1},
				dataType:"json",
				success:function(data){
					result($.map(data, function(item){
						return item;
					}));
				}
			})
		}
	});
});
</script>

<?php
//connect to database
$connect = mysqli_connect("localhost", "root", "", "ip2location");

//select the region name based on the user input
if(empty($_POST["query1"])) {
	//retrieve the country name from index.php
	$country_code = $_POST['country_code'];
	//retrieve user input to do autocomplete
	$request = mysqli_real_escape_string($connect, $_POST["query"]);
	$query = "select DISTINCT region_name from ip2location_db3lite where country_code = '".$country_code."' AND region_name LIKE '{$request}%' GROUP BY region_name";
	$result = mysqli_query($connect, $query);
	$data = array();
	if(mysqli_num_rows($result) > 0){
		while($row = mysqli_fetch_assoc($result)){
			$data[] = $row["region_name"];
		}
	echo json_encode($data);
	}
}else{
	//select the city name based on the user input
	
	//retrieve the country name from index.php
	$country_code = $_POST['country_code'];
	//retrieve user input to do autocomplete
	$request = mysqli_real_escape_string($connect, $_POST["query1"]);
	$region_name = mysqli_real_escape_string($connect, $_POST["region_name"]);
	$query = "select DISTINCT city_name from ip2location_db3lite where country_code = '".$country_code."' AND region_name = '".$region_name."' AND city_name LIKE '{$request}%' GROUP BY city_name";
	$result = mysqli_query($connect, $query);
	$data = array();
	if(mysqli_num_rows($result) > 0){
		while($row = mysqli_fetch_assoc($result)){
			$data[] = $row["city_name"];
		}
	echo json_encode($data);
	}	
}
?>

Revision: 72919

at March 29, 2018 12:44 by Hexasoft

Initial Code

<!DOCTYPE html>
<html>
	<head>
		<title>City Search Example Code Auto Complete</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>  
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
	</head>
	<body>
		<br /><br />
		<div class="container" style="width:600px;">
			<h2 align="center">City Search Example Code Auto Complete</h2>
			<br /><br />
			<form action="" method="post">
				<label>Country: </label>
				<?php 
					//connect to database
					$connect = mysqli_connect("localhost", "root", "", "ip2location");
					
					//retrieve countryName based on ipaddress
					
					//Get the visitor IP address
					//$ip = $_SERVER['REMOTE_ADDR'];
					//In case you are testing locally with 127.0.0.1,
					//you can uncomment the below line to assign the IP address
					//to 8.8.8.8 (or whatever) for your testing.
					$ip= "8.8.8.8";
					
					
					// Function to convert IP address (xxx.xxx.xxx.xxx) to IP number (0 to 256^4-1)
					function Dot2LongIP ($ip) {
						if ($ip == ""){
							return 0;
						}else {
							$ips = explode(".", $ip);
							return ($ips[3] + $ips[2] * 256 + $ips[1] * 256 * 256 + $ips[0] * 256 * 256 * 256);
						}
					}
					// Convert IP address to IP number for querying database
					$ipno = Dot2LongIP($ip);
					
					//start to query from database
					$query = 'select DISTINCT country_name,country_code from ip2location_db3lite where "'.$ipno.'"<= ip_to AND ip_from<="'.$ipno.'"';
					$result = mysqli_query($connect, $query);

					//check if query is sucesss
					if(!empty($result)){
						while($row = mysqli_fetch_assoc($result)){
							echo '<label id="country_name">' . $row["country_name"] .'</label>';
							//store country code in a variable for retrieve the region name and city name
							$country_code = $row["country_code"];
						}	
					}
				?>
				<br /><br />
				<label>Region Name:</label>
				<input type="text" name="region" id="region"  class="form-control input-lg" autocomplete="off" placeholder="Type Region Name" />
				<br /><br />
				<label>City Name:</label>
				<input type="text" name="city" id="city" class="form-control input-lg" autocomplete="off" placeholder="Type City Name" />
				<br /><br />
				<input class="btn btn-default" type="submit" value="submit">
			</form>
		</div>
	</body>
</html>

<script>
$(document).ready(function(){
	$('#region').typeahead({
		source: function(query, result){
			//call php variable into javascript by using php print method
			var country = "<?php print($country_code); ?>";
			$.ajax({
				url:"fetch.php",
				method:"POST",
				data:{country_code:country,query:query},
				dataType:"json",
				success:function(data){
					result($.map(data, function(item){
						return item;
					}));
				}
			})
		}
	});
	$('#city').typeahead({
		source: function(query1, result){
			var name = document.getElementById("region").value;
			//call php variable into javascript by using php print method
			var country = "<?php print($country_code); ?>";
			$.ajax({
				url:"fetch.php",
				method:"POST",
				data:{country_code:country,region_name:name,query1:query1},
				dataType:"json",
				success:function(data){
					result($.map(data, function(item){
						return item;
					}));
				}
			})
		}
	});
});
</script>

<?php
//connect to database
$connect = mysqli_connect("localhost", "root", "", "ip2location");

//select the region name based on the user input
if(empty($_POST["query1"])) {
	//retrieve the country name from index.php
	$country_code = $_POST['country_code'];
	//retrieve user input to do autocomplete
	$request = mysqli_real_escape_string($connect, $_POST["query"]);
	$query = "select DISTINCT region_name from ip2location_db3lite where country_code = '".$country_code."' AND region_name LIKE '{$request}%' GROUP BY region_name";
	$result = mysqli_query($connect, $query);
	$data = array();
	if(mysqli_num_rows($result) > 0){
		while($row = mysqli_fetch_assoc($result)){
			$data[] = $row["region_name"];
		}
	echo json_encode($data);
	}
}else{
	//select the city name based on the user input
	
	//retrieve the country name from index.php
	$country_code = $_POST['country_code'];
	//retrieve user input to do autocomplete
	$request = mysqli_real_escape_string($connect, $_POST["query1"]);
	$region_name = mysqli_real_escape_string($connect, $_POST["region_name"]);
	$query = "select DISTINCT city_name from ip2location_db3lite where country_code = '".$country_code."' AND region_name = '".$region_name."' AND city_name LIKE '{$request}%' GROUP BY city_name";
	$result = mysqli_query($connect, $query);
	$data = array();
	if(mysqli_num_rows($result) > 0){
		while($row = mysqli_fetch_assoc($result)){
			$data[] = $row["city_name"];
		}
	echo json_encode($data);
	}	
}
?>

Initial URL

https://www.ip2location.com/tutorials/creating-autocomplete-for-city-search-using-php-and-mysql-database

Initial Description

This tutorial will demonstrate how to implement the autocomplete search function by using php and ajax.
You can obtain free IPV6 database at http://www.ip2location.com/free/ipv6

Initial Title

Auto Complete City Search Sample Code

Initial Tags

php

Initial Language

PHP

Choose a language for easy browsing: