PHP Ajax Autocomplete With Jquery

Ajax Autocomplete With Jquery

Ajax Autocomplete With Jquery

Here is full tutorial about jquery ajax auto complete with php, So Let's get started the tutorial. First you nedd to create a bd.php file.

Example db.php

class DBController {
	private $host = "localhost";
	private $user = "Fivefive";
	private $password = "54321";
	private $database = "sanwebcorner";
	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;
			return $resultset;
	function numRows($query) {
		$result  = mysqli_query($this->conn,$query);
		$rowcount = mysqli_num_rows($result);
		return $rowcount;	

Then you need to create a readdata.php file like this.

Example readdata.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">
foreach($result as $country) {
<li onClick="selectCountry('<?php echo $country["country_name"]; ?>');"><?php echo $country["country_name"]; ?></li>
<?php } ?>
<?php } } ?>

And now create a index.php file like this.

Example index.php


<TITLE>jQuery AJAX Autocomplete with example</TITLE>
.frmSearch {border: 1px solid #a8d4b1;background-color: #c6f7d0;margin: 2px 0px;padding:40px;border-radius:4px;}
#country-list{float:left;list-style:none;margin-top:-3px;padding:0;width:190px;position: absolute;}
#country-list li{padding: 10px; background: #f0f0f0; border-bottom: #bbb9b9 1px solid;}
#country-list li:hover{background:#ece3d2;cursor: pointer;}
#search-box{padding: 10px;border: #a8d4b1 1px solid;border-radius:4px;}
<script src="" type="text/javascript"></script>
		type: "POST",
		url: "readdata.php",
		beforeSend: function(){
			$("#search-box").css("background","#FFF url(LoaderIcon.gif) no-repeat 165px");
		success: function(data){

function selectCountry(val) {
<div class="frmSearch">
<input type="text" id="search-box" placeholder="Country Name" />
<div id="suggesstion-box"></div>


and done.
hope you like this article, share this with your friends, thankyou.

Cssmoz for learning web design and development, get latest blogger tips, Facebook tips, learn work prayers for beginners also get HTML templates, Blogger templates, Wordpress themes and more!

Post a Comment (0)
Previous Post Next Post