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.

Username live availability Check using php and Ajax

Username live availability is one of the most important thing the database field, why because mostly we have to different kind of username and unique name for all users. then only we can identify the individual user, so for here we are going to check the database field for already existing username availability. so here we are using php fetch coding and AJAX live check without refreshing of the page.

DATABASE

<?php
$conn = mysql_connect("localhost","root","") or die("Database not connected");
$db=mysql_select_db("phpmvcbug", $conn) or die("Database not connected");
?>

database name is --> mvcbugase

table name is --> usernames

Check Database coding

<?php
include('db.php');
if(isset($_POST['username']))
{
$username = $_POST['username'];
$sql = mysql_query("select id from usernames where username='$username'");
if(mysql_num_rows($sql))
{
echo '<STRONG>'.$username.'</STRONG> is already in use.';
}
else
{
echo 'OK';
}
}
?>

AJAX

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#username").change(function() 
{ 
var username = $("#username").val();
var msgbox = $("#status");

if(username.length > 4)
{
$("#status").html('<img src="loader.gif" align="absmiddle">Checking availability...');

$.ajax({  
    type: "POST",  
    url: "ajax.php",  
    data: "username="+ username,  
    success: function(msg){  
   $("#status").ajaxComplete(function(event, request){ 
    if(msg == 'OK')
    { 
    
        $("#username").removeClass("red");
        $("#username").addClass("green");
        msgbox.html('<img src="available.png" align="absmiddle">');
    }  
    else  
    {  
         $("#username").removeClass("green");
         $("#username").addClass("red");
        msgbox.html(msg);
    }  
   
   });
   } 
   
  }); 

}
else
{
$("#username").addClass("red");
$("#status").html('<font color="#cc0000">Please nter atleast 5 letters</font>');
}
return false;
});

});
</script>

index page

<input type="text" name="username" id="username" style="margin-top:35px;" />&nbsp;
<span id="status"></span>

span id="status" is for show the result of the output.

that's it. for live availability check username using php, mysql, and Ajax. 

 

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