Autocomplete search using php, mysql and ajax

We realize what is auto complete in info sort, that is make some predefined entered writings go under the input type box, while concentrating on the data sort, comparably we are looking some substance from mysql database, this really facebook style look idea to propose some data for select before we get the accurate pursuit, for that we are utilizing this sort of inquiry, and this is extremely easy to make seek in php, mysql with ajax and jquery. Let see it in a nutshell.

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

DATABASE DETAILS

database name-->2my4edge

table name --> autocomplete

column names --> id, name, email

DB.PHP

<?php

$connection = mysql_connect('localhost','root','') or die(mysql_error());

$database = mysql_select_db('2my4edge') 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" />&nbsp; &nbsp; Ex:arunkumar, shanmu, vicky<br />

<div id="result"></div>

</div>

Just give this input type simply 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 compose action in SEARCH page without 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 is it. As like the normal fetch from database with like and here we are simply including str_ireplace that is it. What’s more different thinks areas like we know, that is exceptionally straightforward one. How about we attempt this. Furthermore each of our entering content that will comes as in solid letter.