PHP Auto Complete

Hi, today i am going to show you about facebook like autosuggestion with jquery ajax and php, i have developed the same thing and it is very easy to implement just we need a database with users table and few lines of jquery script. let's see how we do this.

HTML

in html take the input box and give it id name #search and take one div to display the searched results into response div give it id name #response  and put it in hidden mode and we will display the response div while we got the response from ajax

<div id="lessoncup">

<h1 style="margin:5px;">Available Keywords : A, S, k, l, J</h1>
<div id="inputbar">
<input name="" type="text" id="search" class="search"><div id="loader"></div>
<div id="response"></div>
</div>

</div>

CSS

<style>

#inputbar{ width:100%; height:33px; padding:5px; background-color:#039;}

.search{ padding:5px; border:solid #333 1px;outline:none; color:#333; font-size:12px; width:200px; float:left;}

#response{width:200px; height:auto; border:solid #999 1px; background-color:#FFF; padding:5px; display:none; margin-top:30px;}

.loading{ margin-top:7px; margin-left:5px; color:#FFF; float:left;}

.list{ margin:0; padding:0; list-style:none;}

.list li{ padding:5px; padding-left:0;text-transform:capitalize;}

.list img{border:solid #999 1px; width:40px; margin:2px;}

</style>

JAVASCRIPT

include the jquery library inside the head, here we need to get the result while key up from input box, write the keyup function to #search input box, write the condition to search box if the length equal to zero it will show the suggestion message, and inside the else write the ajax request and request searchstring.php file and send the stored variable. and display the response message in response div inside the success function

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script>


$(document).ready(function(){
 
 
 $('#search').keyup(function(){
  
  
  var name = $('#search').val();
  
  if(name.length==0){
   
   $('#response').html("Please enter to search records");
   
  }else{
  
  $("#loader").fadeIn(400).html('<div class="loading"><img src="loader.gif" align="absmiddle">&nbsp;Searching...</div>');
   
  var datasend = 'string='+name;
  
  $.ajax({
       type: "POST",
       url: "searchstring.php",
       data: datasend,
       success: function(msg){
    
    $("#loader").fadeOut(200);
    $('#response').fadeIn(200).html(msg);
   }
   
  });
  
 }

 });
 
 $(document).click(function(){
  $("#response").fadeOut('slow');
 });

});

</script>

stringsearch.php

connect this file to database and write the query to get the matched results from users table and match the username column to string variable which is coming from ajax request, and write the condition to if the rows is not found put the message to user and if the results are found loop the matched records inside the LI tag. you able to see the result in response div.

<?php
extract($_REQUEST);
include('db.php');

$getnames=mysql_query("select DISTINCT * from users where username like '".$string."%' limit 0,10");
if(mysql_num_rows($getnames)==0){
 
 echo "No results found";
 
}else{

 echo '<ul class="list">';
  while($row = mysql_fetch_array($getnames)){
   
   echo '<li><img src=userimage/'.$row['image'].' align=middle>'.$row['username'].'</li>';
   
  }
  
 echo '</ul>';
 
}

?>

Database

Create the database

--
-- Table structure for table `users`
--

CREATE TABLE IF NOT EXISTS `users` (
  `uid` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(255) NOT NULL,
  `image` varchar(255) NOT NULL,
  PRIMARY KEY (`uid`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

--

Live Demo   Download Script