Auto_Complete_Search_using_php_and_Ajax

Auto Complete Search

This Auto complete search is provide easily complete the searching keyword from database.
In this Auto Complete Search we can get relevant data from data base based on typing our keywords. Here i used PHP and MySql, Jquery.

Index.php

---

<div class="content">
<input type="text" class="search" id="searchid">
</div>

connection.php

---

<?php
$con= mysql_connect("localhost","root","auto_search");
if(!$con)
{
die('could not connect;'.mysql_error());
}
mysql_select_db("demo",$con);
?>

search.js

---

<?php
include('connect.php');
if($_POST)
{
$username=$_POST['search'];
$sql_res=mysql_query("select id,name,email from autocomplete where name like '%$username%' or email like '%$username%' order by id ");
while($row=mysql_fetch_array($sql_res))
{
$username=$row['name'];
$email=$row['email'];
$U_username='<strong>'.$username.'</strong>';
$U_email='<strong>'.$username.'</strong>';
$name = str_ireplace($username, $U_username, $username);
?>
<div class="show" align="left">
<span class="name"><?php echo $name; ?></span>
</div>
<?php
}
}
?>

Script.js

---

<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>

Download             Back