index.php:
<head>
<TITLE>jQuery AJAX Autocomplete with example</TITLE>
<head>
<script src=”https://code.jquery.com/jquery-2.1.1.min.js” type=”text/javascript”></script>
<script>
$(document).ready(function(){
$(“#search-box”).keyup(function(){
$.ajax({
type: “POST”,
url: “readdata.php”,
data:’keyword=’+$(this).val(),
beforeSend: function(){
$(“#search-box”).css(“background”,”#FFF url(LoaderIcon.gif) no-repeat 165px”);
},
success: function(data){
$(“#suggesstion-box”).show();
$(“#suggesstion-box”).html(data);
$(“#search-box”).css(“background”,”#FFF”);
}
});
});
});
function selectCountry(val) {
$(“#search-box”).val(val);
$(“#suggesstion-box”).hide();
}
</script>
</head>
<body>
<div class=”frmSearch”>
<input type=”text” id=”search-box” placeholder=”Country Name” />
<div id=”suggesstion-box”></div>
</div>
</body>
</html>
db.php:
class DBController {
private $host = “localhost”;
private $user = “username”;
private $password = “password”;
private $database = “database_name”;
private $conn;
function __construct() {
$this->conn = $this->connectDB();
}
function connectDB() {
$conn = mysqli_connect($this->host,$this->user,$this->password,$this->database);
return $conn;
}
function runQuery($query) {
$result = mysqli_query($this->conn,$query);
while($row=mysqli_fetch_assoc($result)) {
$resultset[] = $row;
}
if(!empty($resultset))
return $resultset;
}
function numRows($query) {
$result = mysqli_query($this->conn,$query);
$rowcount = mysqli_num_rows($result);
return $rowcount;
}
}
?>
readdata.php:
require_once(“db.php”);
$db_handle = new DBController();
if(!empty($_POST[“keyword”])) {
$query =”SELECT * FROM country WHERE country_name like ‘” . $_POST[“keyword”] . “%’ ORDER BY country_name LIMIT 0,6”;
$result = $db_handle->runQuery($query);
if(!empty($result)) {
?>
<ul id=”country-list”>
<?php
foreach($result as $country) {
?>
<li onClick=”selectCountry(‘<?php echo $country[“country_name”]; ?>’);”><?php echo $country[“country_name”]; ?></li>
<?php } ?>
</ul>
<?php } } ?>
