Friday, 18 November 2016

Ajax Search in php

(index.php)

<div id="content">
<input type="text" class="search" id="searchid" placeholder="Search for parent profile" />
&nbsp; &nbsp; Example : manjeet, manjeet@gmail.com, 998822<br />
<div id="result">
</div>

</div>

(js.php)

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


(search.php)

if($_POST)
{
$q=$_POST['search'];
$sql_res=mysql_query("SELECT * FROM `signup` WHERE `first_name` LIKE '%$q%' OR `email` LIKE '%$q%' OR `mobile` LIKE '%$q%' order by id LIMIT 5");
while($row=mysql_fetch_array($sql_res))
{
$username=$row['first_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);
?>
<?php
if($row['type']=='parent'){?>
<div class="show" align="left">
<div onclick="send(<?php echo $row['id']; ?>)"><img src="<?php echo SITE_URL; ?>img/zs.png" style="width:50px; height:50px; float:left; margin-right:6px;" /><span class="name"><?php echo $final_username; ?></span>&nbsp;<br/><?php echo $final_email; ?>&nbsp;<br/><?php echo $row['mobile']; ?><br/></div>
</div>
<?php }
}
}

No comments:

Post a Comment