Live Auto complete Search using PHP and JQuery.

POSTED

Many beginners and advanced programmer always want to know that how to get data from database without refreshing page or or without any click events. Today I am going to exolane live autocomplete seach example Here I am going to design Live Auto Complete seach page using Php and jquery with very easy steps.
Now i am going to display the output of our Auto complete search page.

Auto Complete search Page Output:

Here is the output of the gmail style login page .

auto complete search

download download

Implementation of code:


db.php: This PHP file is used to create a database connection with MySql database. Here is the code of this file.

<?php

$connection=mysqli_connect("localhost","root","","livesearch");

?>

autocomplete.sql: This SQL file is used to create table in database. Here is the code of this file.

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";

CREATE TABLE IF NOT EXISTS `employee` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(60) NOT NULL,
  `email` varchar(60) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;


INSERT INTO `employee` (`id`, `name`, `email`) VALUES
(1, 'Ajay Devgan', 'ajay_devgan@coderglass.com'),
(2, 'Amitab Bachan', 'amitabh_bachan@coderglass.com'),
(3, 'Amir Khan', 'amir_khan@coderglass.com'),
(4, 'Boby Deol', 'boby_deol@coderglass.com'),
(5, 'Baban Irani', 'baban_irani@coderglass.com'),
(6, 'Sahrukh Khan', 'sahrukh_khan@coderglass.com'),
(7, 'Salman Khan ', 'salman_khan@coderglass.com'),
(8, 'Sahrukh Khan', 'sahrukh_khan@coderglass.com'),
(9, 'Karina Kapoor', 'karina_kapoor@coderglass.com'),
(10, 'Kaitrina Kaif', 'kaitrina_kaif@coderglass.com'),
(11, 'Irfan Khan', 'irfan_khan@coderglass.com');


search.php: This PHP file is used to fetching data from database using jquery without readdir refreshing page or click events. Here is the code of this file.

<?php
include('db.php');
if($_POST)
{
$q=$_POST['search'];
$sql_res="select id,name,email from employee where name like '%$q%' or email like '%$q%' order by id LIMIT 5";
$run = mysqli_query($connection,$sql_res);
while($row=mysqli_fetch_array($run))
{
$username=$row['name'];
$email=$row['email'];
$b_username='<strong>'.$q.'</strong>';
$b_email='<strong>'.$q.'</strong>';
$final_username = str_ireplace($q, $b_username, $username);
$final_email = str_ireplace($q, $b_email, $email);
?>
<div class="show" align="left">
<img src="varun.PNG" style="width:50px; height:50px; float:left; margin-right:6px;" />
<span class="name"><?php echo $final_username; ?></span>&nbsp;<br/><?php echo $final_email; ?><br/>
</div>
<?php
}
}
?>

index.php: This is the html file for front-end design. Here is the code of this file.

<html>
	
	<title>Live Auto complete Search using PHP and JQuery- coder glass.</title>
	<head>
		<link type="text/css" rel="stylesheet" href="style.css" />
		<meta name="Description" content="Live Auto complete Search using PHP and JQuery- coder glass."/>
		
        <meta name="Keywords" content="free, tutorial, on, Java programming, jsp, ejb, html, css, xml,
		java script, jquery, ajax, php, sql, mysql, database,
	    jdbc, odbc, spring, struts, hibernate, array, ANT, servlet, awt, code, programe, gmail, programming,
		Latest,facebook script, google script, 
	    twitter script,ecommerce,  Technologies, Free,  Tutorials, References, Examples,  coder glass, coderglas, coder"/>
		
        <link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
		<link href='https://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
		<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
		<script type="text/javascript">
$(function(){
$(".search").keyup(function() 
{ 
var searchid = $(this).val();
var dataString = 'search='+ searchid;
if(searchid!='')
{
	$.ajax({
	type: "POST",
	url: "search.php",
	data: dataString,
	cache: false,
	success: function(html)
	{
	$("#result").html(html).show();
	}
	});
}return false;    
});

jQuery("#result").live("click",function(e){ 
	var $clicked = $(e.target);
	var $name = $clicked.find('.name').html();
	var decoded = $("<div/>").html($name).text();
	$('#searchid').val(decoded);
});
jQuery(document).live("click", function(e) { 
	var $clicked = $(e.target);
	if (! $clicked.hasClass("search")){
	jQuery("#result").fadeOut(); 
	}
});
$('#searchid').click(function(){
	jQuery("#result").fadeIn();
});
});
</script>
		
		
	</head>
	<body>
	<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-73364464-1', 'auto');
  ga('send', 'pageview');

   </script>
		<center><div class="base">
			<div id="logo">
				<img src="logo.png" width="300" height="70" />
			</div>
			<div id="info1">
				Live Auto complete Search using PHP and JQuery
			</div>
			
			<div class="base2">
			<?php include('../../../advertise/left-ads.php'); ?>
			<div id="form2" style="float:left">
				<div id="form-img">
				<img src="profile-img.png" width="80" height="80" />
			    </div>
				<div id="info4">
				    <a href="#"/>(Ex: Salman Khan, Sahrukh Khan, Amir Khan)</a>
			    </div>
				<input type="text" class="search" id="searchid" placeholder="Search for Actors & Actress" /><br /> 
                <div id="result">
                </div>
				
			</div>
			<?php include('../../../advertise/right-ads.php'); ?>
			</div>
			<div class="clear"></div>
			
			
			
			<div id="bottom">
				<ul >
					<li>&copy; www.coderglass.com</li>
					<li style="float:right; margin-right:80px;">Designed by Varun Singh </li>
					
				</ul>
			</div>
		
		</div>
		</center>
	</body>
	
</html>


style.css: This file is used to set the every body part and other things on perfect postion.

<?php
body{
	background-image: url("grids.png");
	height:100%;
	margin:0px;
	padding:0px;
	width:100%;
	
}
.base{
	position:absolute;
	width:100%;
	top:0px;
	left:0px;
	color:gray;

}
.base2{
	width:1000px;
	height:430px;
}


#logo{
	
	margin-top:20px;
	width:1000px;
	height:70px;
	
}

#info1{
	
	width:1000px;
	height:25px;
	margin-top:25px;
	font-family: 'Open Sans', sans-serif;
	background: #000000;
    background: -webkit-linear-gradient(top,#000000,#000000);
    border-color: rgba(0,0,0,0.1);
    color: #fff!important;
    font-size: 20px;
	padding-top:5px;
}

#form1{
	margin-top:17px;
	width:230px;
	margin-left:20px;
    background:red;
	
	
	

}
#form2{
	margin-top:17px;
	width:500px;
	height:280px;
    padding-top:20px;
	
	
	

}
#form3{
	margin-top:17px;
	width:230px;
	margin-right:20px;
    background:red;
	
	
	

}
.clear{
	clear:both;
}
#form-img{
	
	width:99px;
	height:99px;
}
#mailbox{
	width:270px;
	height:42px;
	border-radius:5px 5px 5px 5px;
	background:white;
	
	font-size:18px;
	margin-top:20px;
	border-width: 0px;
	border-style:solid;
	border-color: blue;
}
#button2{
	width:270px;
	height:35px;
	
	margin-top:10px;
	background:#498af2;
	font-family:verdana;
	font-size:14px;
	color:white;
	border-radius:5px 5px 5px 5px;
	border-width: 1px;
	border-style:solid;
	border-color: gray;
	cursor:pointer;
	outline:none;
	
}
#info3{
	float:right;
	margin-top:10px;
	font-size:13px;
	font-family: 'Open Sans', sans-serif;
	color:#498af2;
	padding-right:42px;
	font-weight:bold;
}
#info3 a{
	color:#498af2;
	text-decoration:none;
}
#info4{
	margin-top:10px;
	font-size:13px;
	font-family: 'Open Sans', sans-serif;
	
	font-weight:bold;
}
#info4 a{
	color:#498af2;
	text-decoration:none;
}
#info5{
	margin-top:30px;
	font-size:13px;
	font-family: 'Open Sans', sans-serif;
	color:#87898b;
	font-weight:bold;
}

#logo2{
	
	margin-top:10px;
	height:27px;
	width:243px;
}
#bottom {
	
	
	width:1000px;
	height:60px;
	margin-top:25px;
	font-family: 'Open Sans', sans-serif;
	background: #000000;
    background: -webkit-linear-gradient(top,#000000,#000000);
    border-color: rgba(0,0,0,0.1);
    color: #fff!important;
    font-size: 20px;
	padding-top:5px;

	
}
#bottom ul{
	list-style: none;
	
}
#bottom ul li{
	float:left;
	margin-left:20px;
     
	
}
#searchid
	{
		width:500px;
		border:solid 1px #000;
		padding:10px;
		font-size:14px;
		border-radius:5px 5px 5px 5px;
	}
	#result
	{

		width:500px;
		border-radius:5px 5px 5px 5px;
		display:none;
		margin-top:-1px;
		border-top:0px;
		overflow:hidden;
		border:1px #CCC solid;
		background-color: white;
	}
	.show
	{
		padding:10px; 
		border-bottom:1px #999 dashed;
		font-size:15px; 
		height:50px;
	}
	.show:hover
	{
		background:#4c66a4;
		color:#FFF;
		cursor:pointer;
	}
?>

The End:

Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section. We will be very happy to hear that.

If you like my tutorial, please follow us on facebook, Google + and Twitter. I need your support to continue.



Comments: