/ Published in: PHP
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
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
<?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 //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 { 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.'"'; //check if query is sucesss 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 //select the region name based on the user input //retrieve the country name from index.php $country_code = $_POST['country_code']; //retrieve user input to do autocomplete $query = "select DISTINCT region_name from ip2location_db3lite where country_code = '".$country_code."' AND region_name LIKE '{$request}%' GROUP BY region_name"; $data[] = $row["region_name"]; } } }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 $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"; $data[] = $row["city_name"]; } } } ?>