<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<!-- bootstrap plugins -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"> 
<style type="text/css">
.container {
    width: 100%;
}

.container .input {
    background: #015eae;
    border: 3px solid #015eae;
}

.container #output {
    height: 50px;
    color: #000;
    padding: 0;
    margin: 0;
    border: 1px solid #ddd;
    color: #000; 
    background: transparent;
}

.container #output:hover {
    background: #428bca;
    color: #fff;
}

.container #output > img {
    max-width: 100%;
    max-height: 80%;
    padding: 1px;
    border: 1px solid #ddd;
}

.container #output > .address {
    padding-left: 60px;
    padding-right: 60px;
    margin-top: -10px;
    margin-bottom: -10px;
    font-size: 11px;
}

.container #head {
    padding-bottom: 2px; 

}
.search {  
     /*background:url(search3.jpg) no-repeat center ; */
}  
 

</style>
</head>

<body> 
<div class="container">
<div class="page-header"><h2>Facebook like Autosuggestion with jQuery, Ajax and PHP. </h2></div>
<div class="box col-md-10">  
     <div class="row">
        <div class='col-sm-10'>
            <div class="form-group"> 
              <div id="head" class="input-group input">
                <input type='text' class="form-control input-sm " id="inputtext" placeholder="Search.." />
                <span class="input-group-addon search" > 
                  <span class="glyphicon glyphicon-search"></span> 
                 </span>
              </div>
              <div  id="body" >
                     
              </div> 
            </div>
        </div> 
    </div>
      
</div> 
</div> 
 
</body>
</html>
 
<!-- jQuery plugins -->
<script type = "text/javascript" src = "jquery/jquery.min.js" ></script>   
<script type="text/javascript"> 
  $(document).ready( function(){ 
/* set the click event handler of a button */
    $('input').keyup(function(){ 
      /*get the given number in the textbox*/
      var n = document.getElementById("inputtext").value; 
      /*set a variable for displaying the result*/ 
 
              if(n==''){ 
                $("#body ").html('')
               }else{
                $("#output ").hide();
                $("#output").fadeIn(900,0); 
                   $.ajax({
                     type: "POST",
                     url: "loaddata.php ",
                     dataType: "text", //expect html to be returned  
                     data: {
                         name:n
                     },
                     success: function(data) { 
                         $("#body").html(data);
                     }
                 }); 

               } 
    })
  }) 
  </script> 