php ajax autocomplete form mysql database

Hello all i have sucessfully achived my auto complete form but the problem is that the results are not accordingly when we just backspace it . this is my code ..

 <html>
 <head>
 <title>Live Search Ajax Example</title>
 <script language="javascript" type="text/javascript"
  src="jquery-2.0.2.js">
  </script>
   </head>
    <body>
     <h1>Live Search: Ajax Example</h1>
     <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>
 <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>
     </body>
       </html>

and my php page is like

<?php
   include('database.php');
 if($_POST)
  {
  $q=$_POST['search'];
         $sql_res=mysql_query("select id,name,email from fk_mem 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">
            <span class="name"><?php echo $final_username; ?></span>&nbsp;<br/><?php echo $final_email; ?><br/>
             </div>
          <?php
          }
         }
                ?>

any help please ..

Put this between <HEAD> and </HEAD> put this:

<script src="jquery-2.0.2.js"></script>
<script>
$.customPOST = function(data,callback){
  $.post('search.php',data,callback,'json');
}

$(document).ready(function() {
    $(".search").keyup(function(){
        $.customPOST({search: $.('#searchid').val(),function(response){
         if(response.success){
          var html_code  = '<div class="show" style="text-align:left;">';
              html_code += '<span class="name">' + response.final_username + '</span>';
              html_code += '&nbsp;<br/>' + response.final_email + '<br/></div>';
          $("#result").text(html_code);
          $("#result").show();
         }
    });

});
</script>

You PHP script must return a JSON response like this way :

<?php
... your code here and ....

$final_username = str_ireplace($q, $b_username, $username);
$final_email = str_ireplace($q, $b_email, $email);

// here we create and return our JSON response
$response = array('final_username' => $final_username, 'final_email' => $final_email);
echo json_encode($response);

?>