How to display search results live - php

Question

Here i have simple search engine to search usernames. when people type username i want them to see results below search box and have them taken to search page only after they hit enter (like facebooks search engine).
html
<div class="search">
<form action="search.php" method="GET">
<input type="text" name="Search" size="50">
<input type="submit" value="Search">
</form>
</div>
php (search.php)
<?php
require 'includes/connection.php';
$term = $_GET['Search'];
$query_ver = "select * from Members where Name like '%$term%'";
$query = mysqli_query($dbc, $query_ver);
while($row = mysqli_fetch_array($query)) {
$name = $row['Name'];
}
echo $name;
?>
so is there a way to display $name below search box only with php and html

Answer 1

HTML
<div class="search">
<form action="search.php" method="GET">
<input type="text" name="search" size="50" class="search">
<input type="submit" value="Search">
</form>
</div>
Javascript
<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: "result.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
<?php
include('db.php');
if($_POST)
{
$q = mysql_real_escape_string($_POST['search']);
$strSQL_Result = mysql_query("select id,name,email from live_search where name like '%$q%' or email like '%$q%' order by id LIMIT 5");
while($row=mysql_fetch_array($strSQL_Result))
{
$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">
<img src="https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-prn1/27301_312848892150607_553904419_n.jpg" style="width:50px; height:50px; float:left; margin-right:6px;" /><span class="name"><?php echo $final_username; ?></span> <br/><?php echo $final_email; ?><br/>
</div>
<?php
}
}
?>
for reference here is good solution
LINK1
LINK2