Advanced Search

Auto Complete City Search Sample Code

/ Published in: PHP
Save to your folder(s)
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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <?php
  2. /********************************************************************************/
  3. /* Description: This codewill demonstrate how to implement the autocomplete search function by using php and ajax.  */
  4. /*              For information, please visit https://www.ip2location.com/      */
  5. /********************************************************************************/
  6. /* You can obtain free IPV6 database at http://www.ip2location.com/free/ipv6 */
  7. ?>
  8.  
  9. <!DOCTYPE html>
  10. <html>
  11. 	<head>
  12. 		<title>City Search Example Code Auto Complete</title>
  13. 		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  14. 		<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>  
  15. 		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
  16. 	</head>
  17. 	<body>
  18. 		<br /><br />
  19. 		<div class="container" style="width:600px;">
  20. 			<h2 align="center">City Search Example Code Auto Complete</h2>
  21. 			<br /><br />
  22. 			<form action="" method="post">
  23. 				<label>Country: </label>
  24. 				<?php 
  25. 					//connect to database
  26. 					$connect = mysqli_connect("localhost", "root", "", "ip2location");
  27.  
  28. 					//retrieve countryName based on ipaddress
  29.  
  30. 					//Get the visitor IP address
  31. 					//$ip = $_SERVER['REMOTE_ADDR'];
  32. 					//In case you are testing locally with 127.0.0.1,
  33. 					//you can uncomment the below line to assign the IP address
  34. 					//to 8.8.8.8 (or whatever) for your testing.
  35. 					$ip= "8.8.8.8";
  36.  
  37.  
  38. 					// Function to convert IP address (xxx.xxx.xxx.xxx) to IP number (0 to 256^4-1)
  39. 					function Dot2LongIP ($ip) {
  40. 						if ($ip == ""){
  41. 							return 0;
  42. 						}else {
  43. 							$ips = explode(".", $ip);
  44. 							return ($ips[3] + $ips[2] * 256 + $ips[1] * 256 * 256 + $ips[0] * 256 * 256 * 256);
  45. 						}
  46. 					}
  47. 					// Convert IP address to IP number for querying database
  48. 					$ipno = Dot2LongIP($ip);
  49.  
  50. 					//start to query from database
  51. 					$query = 'select DISTINCT country_name,country_code from ip2location_db3lite where "'.$ipno.'"<= ip_to AND ip_from<="'.$ipno.'"';
  52. 					$result = mysqli_query($connect, $query);
  53.  
  54. 					//check if query is sucesss
  55. 					if(!empty($result)){
  56. 						while($row = mysqli_fetch_assoc($result)){
  57. 							echo '<label id="country_name">' . $row["country_name"] .'</label>';
  58. 							//store country code in a variable for retrieve the region name and city name
  59. 							$country_code = $row["country_code"];
  60. 						}	
  61. 					}
  62. 				?>
  63. 				<br /><br />
  64. 				<label>Region Name:</label>
  65. 				<input type="text" name="region" id="region"  class="form-control input-lg" autocomplete="off" placeholder="Type Region Name" />
  66. 				<br /><br />
  67. 				<label>City Name:</label>
  68. 				<input type="text" name="city" id="city" class="form-control input-lg" autocomplete="off" placeholder="Type City Name" />
  69. 				<br /><br />
  70. 				<input class="btn btn-default" type="submit" value="submit">
  71. 			</form>
  72. 		</div>
  73. 	</body>
  74. </html>
  75.  
  76. <script>
  77. $(document).ready(function(){
  78. 	$('#region').typeahead({
  79. 		source: function(query, result){
  80. 			//call php variable into javascript by using php print method
  81. 			var country = "<?php print($country_code); ?>";
  82. 			$.ajax({
  83. 				url:"fetch.php",
  84. 				method:"POST",
  85. 				data:{country_code:country,query:query},
  86. 				dataType:"json",
  87. 				success:function(data){
  88. 					result($.map(data, function(item){
  89. 						return item;
  90. 					}));
  91. 				}
  92. 			})
  93. 		}
  94. 	});
  95. 	$('#city').typeahead({
  96. 		source: function(query1, result){
  97. 			var name = document.getElementById("region").value;
  98. 			//call php variable into javascript by using php print method
  99. 			var country = "<?php print($country_code); ?>";
  100. 			$.ajax({
  101. 				url:"fetch.php",
  102. 				method:"POST",
  103. 				data:{country_code:country,region_name:name,query1:query1},
  104. 				dataType:"json",
  105. 				success:function(data){
  106. 					result($.map(data, function(item){
  107. 						return item;
  108. 					}));
  109. 				}
  110. 			})
  111. 		}
  112. 	});
  113. });
  114. </script>
  115.  
  116. <?php
  117. //connect to database
  118. $connect = mysqli_connect("localhost", "root", "", "ip2location");
  119.  
  120. //select the region name based on the user input
  121. if(empty($_POST["query1"])) {
  122. 	//retrieve the country name from index.php
  123. 	$country_code = $_POST['country_code'];
  124. 	//retrieve user input to do autocomplete
  125. 	$request = mysqli_real_escape_string($connect, $_POST["query"]);
  126. 	$query = "select DISTINCT region_name from ip2location_db3lite where country_code = '".$country_code."' AND region_name LIKE '{$request}%' GROUP BY region_name";
  127. 	$result = mysqli_query($connect, $query);
  128. 	$data = array();
  129. 	if(mysqli_num_rows($result) > 0){
  130. 		while($row = mysqli_fetch_assoc($result)){
  131. 			$data[] = $row["region_name"];
  132. 		}
  133. 	echo json_encode($data);
  134. 	}
  135. }else{
  136. 	//select the city name based on the user input
  137.  
  138. 	//retrieve the country name from index.php
  139. 	$country_code = $_POST['country_code'];
  140. 	//retrieve user input to do autocomplete
  141. 	$request = mysqli_real_escape_string($connect, $_POST["query1"]);
  142. 	$region_name = mysqli_real_escape_string($connect, $_POST["region_name"]);
  143. 	$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";
  144. 	$result = mysqli_query($connect, $query);
  145. 	$data = array();
  146. 	if(mysqli_num_rows($result) > 0){
  147. 		while($row = mysqli_fetch_assoc($result)){
  148. 			$data[] = $row["city_name"];
  149. 		}
  150. 	echo json_encode($data);
  151. 	}	
  152. }
  153. ?>

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.