2014-01-18 34 views
-3

大家好,我已經成功完成了我的自動完成表單,但問題是,當我們只是退格時,結果並不相應。 這是我的代碼..php ajax自動完成表單mysql數據庫

<html> 
<head> 
<title>Live Search Ajax Example</title> 
<script language="javascript" type="text/javascript" 
    src="jquery-2.0.2.js"> 
    </script> 
    </head> 
    <body> 
    <h1>Live Search: Ajax Example</h1> 
    <div class="content"> 
    <input type="text" class="search" id="searchid" placeholder="Search for people" />&nbsp; &nbsp; Ex:arunkumar, shanmu, vicky<br /> 
    <div id="result"></div> 
    </div> 
<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> 
    </body> 
     </html> 

和我的PHP頁面是一樣

<?php 
    include('database.php'); 
if($_POST) 
    { 
    $q=$_POST['search']; 
     $sql_res=mysql_query("select id,name,email from fk_mem where name like '$q%' or email like '$q%' order by id LIMIT 5"); 
    while($row=mysql_fetch_array($sql_res)) 
    { 
    $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"> 
      <span class="name"><?php echo $final_username; ?></span>&nbsp;<br/><?php echo $final_email; ?><br/> 
      </div> 
      <?php 
      } 
     } 
       ?> 

任何幫助,請..

回答

0

將這個<HEAD></HEAD>之間把這個:

<script src="jquery-2.0.2.js"></script> 
<script> 
$.customPOST = function(data,callback){ 
    $.post('search.php',data,callback,'json'); 
} 

$(document).ready(function() { 
    $(".search").keyup(function(){ 
     $.customPOST({search: $.('#searchid').val(),function(response){ 
     if(response.success){ 
      var html_code = '<div class="show" style="text-align:left;">'; 
       html_code += '<span class="name">' + response.final_username + '</span>'; 
       html_code += '&nbsp;<br/>' + response.final_email + '<br/></div>'; 
      $("#result").text(html_code); 
      $("#result").show(); 
     } 
    }); 

}); 
</script> 

你的PHP腳本必須像這樣返回一個JSON響應:

<?php 
... your code here and .... 

$final_username = str_ireplace($q, $b_username, $username); 
$final_email = str_ireplace($q, $b_email, $email); 

// here we create and return our JSON response 
$response = array('final_username' => $final_username, 'final_email' => $final_email); 
echo json_encode($response); 

?>