PHP Training By OM SIR Whatsapp Now for free Demo : 8149996597

FACEBOOK TYPE SEARCH BOX AUTOMATIC USING JQUERY & AJAX & PHP

PHP    CODE        FOR      SEARCHING        EXAMPLE      LIKE      FACEBOOK:

(1)CREATE TABLE    test_auto_complete :

Create table   test_auto_complete
(uid    int(10), 
Username  varchar(200), 
Email   varchar(200),
media   varchar(200),
country  varchar(200));

(2)write      code   for       “searchform.html”  :
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.0.min.js"></script>
<style type="text/css">
        body{
                font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
        }
        .contentArea{
                width:600px;
                margin:0 auto;
        }
        #inputSearch
        {
                width:350px;
                border:solid 1px #000;
                padding:3px;
        }
        #divResult
        {
                position:absolute;
                width:350px;
                display:none;
                margin-top:-1px;
                border:solid 1px #dedede;
                border-top:0px;
                overflow:hidden;
                border-bottom-right-radius: 6px;
                border-bottom-left-radius: 6px;
                -moz-border-bottom-right-radius: 6px;
                -moz-border-bottom-left-radius: 6px;
                box-shadow: 0px 0px 5px #999;
                border-width: 3px 1px 1px;
                border-style: solid;
                border-color: #333 #DEDEDE #DEDEDE;
                background-color: white;
        }
        .display_box
        {
                padding:4px; border-top:solid 1px #dedede;
                font-size:12px; height:50px;
        }
        .display_box:hover
        {
                background:#3bb998;
                color:#FFFFFF;
                cursor:pointer;
        }
</style>

<script>

$(function(){
$(".search").keyup(function()
{
var inputSearch = $(this).val();
var dataString = 'searchword='+ inputSearch;
if(inputSearch!='')
{
      $.ajax({
      type: "POST",
      url: "search.php",
      data: dataString,
      cache: false,
      success: function(html)
      {
      $("#divResult").html(html).show();
      }
      });
}return false;   
});

jQuery("#divResult").live("click",function(e){
      var $clicked = $(e.target);
      var $name = $clicked.find('.name').html();
      var decoded = $("<div/>").html($name).text();
      $('#inputSearch').val(decoded);
});
jQuery(document).live("click", function(e) {
      var $clicked = $(e.target);
      if (! $clicked.hasClass("search")){
      jQuery("#divResult").fadeOut();
      }
});
$('#inputSearch').click(function(){
      jQuery("#divResult").fadeIn();
});
});


</script>



</head>




<body>



<div class="contentArea">
<input type="text" class="search" id="inputSearch" />Ex: om, arun, pranita<br />
<div id="divResult">
</div>
</div>


</body>
</html>

(2)write     code     for       “search.php”  file:

<?php
include('db.php');
if($_POST)
{
$q=$_POST['searchword'];
$sql_res=mysql_query("select uid,username,email,media,country from test_auto_complete where username like '%$q%' or email like '%$q%' order by uid LIMIT 5");
while($row=mysql_fetch_array($sql_res))
{
$username=$row['username'];
$email=$row['email'];
$media=$row['media'];
$country=$row['country'];
$b_username='<b>'.$q.'</b>';
$b_email='<b>'.$q.'</b>';
$final_username = str_ireplace($q, $b_username, $username);
$final_email = str_ireplace($q, $b_email, $email);
?>
<div class="display_box" align="left">
<img src="img/<?php echo $media; ?>" 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/>
<span style="font-size:9px; color:#999999"><?php echo $country; ?></span></div>
<?php
}
}
?>

note: img  is folder name where all images will be kept..



Previous
Next Post »

1 comments:

Write comments
31 July 2017 at 21:34 delete

Thanks for sharing this blog post. Good information about PHP. This blog is useful for me to understand PHP. PHP training in Bangalore

Reply
avatar

PHP Training Mumbai, PHP MySQL Training Mumbai, PHP Course Mumbai, PHP Institute Mumbai ConversionConversion EmoticonEmoticon