Tuesday, 18 August 2015

FACEBOOK TYPE SEARCH BOX AUTOMATIC USING JQUERY & AJAX & PHP

03:28

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..



Written by

We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.

1 comments:

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

    ReplyDelete

PHP Training Mumbai, PHP MySQL Training Mumbai, PHP Course Mumbai, PHP Institute Mumbai

 

© 2013 PHP TRAINING IN MUMBAI BY OM SIR . All rights resevered. Designed by OM SIR

Back To Top