如何顯示實時搜索結果

Question

在這裏，我有簡單的搜索引擎來搜索用戶名。當用戶輸入用戶名時，我希望他們在搜索框下方看到結果，並且只有在他們按下回車鍵後（例如臉書搜索引擎）才能將它們帶到搜索頁面。

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; 

?> 

所以是有隻使用PHP和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>&nbsp;<br/><?php echo $final_email; ?><br/> 
      </div> 
     <?php 
    } 
} 
?> 

參考這裏是很好的解決方案

LINK1 LINK2