Autocomplete search using php, mysql and ajax

We know what is autocomplete in input type, that is make some predefined entered texts come under the input type box, while focusing on the input type, similarly we are searching some content from mysql database, this actually see image style search concept to suggest some data for select before we get the exact search, for that we are using this kind of search, and this is very simple to make search in php, mysql with ajax and jquery. let see it in brief.

 

as like you see in the above image, the search will be comes like that by using php, mysql and ajax with jquery.

DATABASE DETAILS

database name-->phpmvcbug

table name --> autocomplete

column names --> id, name, email

DB.PHP

<?php
$connection = mysql_connect('localhost','root','') or die(mysql_error());
$database = mysql_select_db('phpmvcbug') or die(mysql_error());
?>

the above is database file.

INDEX.PHP

<div class="content">
<input type="text" class="search" id="searchid" placeholder="Search for people" /> 

 Ex:arunkumar, shanmu, vicky<br /> 
<div id="result"></div>
</div>

just give this input type only in index page with AJAX. you can see the ajax coding below here that is also comes in index page

AJAX

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

the above all for make action in SEARCH page with out refreshing the page.

SEARCH.PHP

<?php
include('db.php');
if($_POST)
{
$q=$_POST['search'];
$sql_res=mysql_query("select id,name,email from autocomplete where name 

                      like '%$q%' or email like '%$q%' order by id LIMIT 5");
while($row=mysql_fetch_array($sql_res))
{
$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="author.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
}
}
?>

that's it. as like the usual fetch from database with like and here we are just adding str_ireplace, that's it. and other thinks are as like we know, that is very simple one. let's try this. and each of our entering text that wil comes as in strong letter.

 

If you have any problem regarding this tutorial configuration please feel free to comment we love to answer your queries.