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


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.