2015-05-09 60 views
-2

我嘗試了一個自動建議搜索框的下載代碼,但它沒有奏效。它不顯示我的數據庫中的任何內容。在這種編程語言中,我仍然是新手,特別是在使用AJAX和JavaScript時。使用PHP和AJAX自動建議搜索框

這裏是我的代碼:

dbcon2.php

<?php 

$con2['host'] = 'localhost'; 
$con2['user'] = 'root'; 
$con2['pass'] = 'thirteen'; 
$con2['db'] = 'pis'; 
$sel2 = mysql_connect($con2['host'], $con2['user'], $con2['pass']); 
mysql_select_db($con2['db'], $sel2); 
mysql_set_charset("utf-8"); 

$datab2 = $con2['db'];?> 

set_creditlimit.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Autocomplete search using php, mysql and ajax</title> 
<link rel="stylesheet" type="text/css" href="assets/css/custom.css"> 
<script type="text/javascript" src="assets/js/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> 
</head> 
<body> 
<div id="page-wrapper"> 
    <div id="page-inner"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <h2>ACL</h2> 
      </div> <!-- <div class="col-md-12"> --> 
     </div> <!-- <div class="row"> --> 

     <hr /> 
     <div class="row"> 
      <div class="col-md-12"> 
       <!-- Start of Form --> 
       <div class="panel panel-success"> 
        <div class="panel-heading"> 
         Set-up Allowable Credit Limit 
        </div> <!-- <div class="panel-heading"> --> 
        <!-- End of Heading --> 
        <!-- Start of Body --> 
        <div class="panel-body"> 
         <form class="form-horizontal"> 
          <div class="row"> 
           <div class="col-md-6 col-md-offset-3"> 
            <label>Search Employee:</label> 
            <input type="text" id="searchid" placeholder="Search Employee" class="search"> 
           </div> 
           <div id="result"></div> 
          </div> 
          <br /> 

          <!-- ------------- --> 

          <div class="row"> 
           <div class="col-md-6 col-md-offset-3"> 
            <label>Position:</label> 
            <input class="form-control" disabled> 
           </div> 
          </div> 
          <br /> 

          <!-- ------------- --> 

          <div class="row"> 
           <div class="col-md-6 col-md-offset-3"> 
            <label>Department:</label> 
            <input class="form-control" disabled> 
           </div> 
          </div> 
          <br /> 

          <!-- ------------- --> 

          <div class="row"> 
           <div class="col-md-6 col-md-offset-3"> 
            <label>Business Unit:</label> 
            <input class="form-control" disabled> 
           </div> 
          </div> 
          <br /> 

          <!-- ------------- --> 

          <div class="row"> 
           <div class="col-md-6 col-md-offset-3"> 
            <label>Allowed Credit Limit:</label> 
            <input class="form-control"> 
           </div> 
          </div> 
          <br /> 
          <br /> 

          <!-- ------------- --> 

          <div class="control-group"> 
           <div class="controls"> 
            <center> 
             <button class="btn btn-success btn-lg"><i class="glyphicon glyphicon-hand-right fa-1x">&nbsp;Submit</i></button> 
            </center> 
           </div> 
          </div> 

         </form> 
        </div> <!-- <div class="panel-body"> --> 
       </div> <!-- <div class="panel panel-success"> --> 
      </div> <!-- <div class="col-md-12"> --> 
     </div> <!-- <div class="row"> --> 

    </div> <!-- <div id="page-inner"> --> 
</div> <!-- <div id="page-wrapper"> --> 
</body> 
</html> 

的search.php

<?php 

include('dbcon2.php'); 
if ($_POST) 
{ 
$q = $_POST['search']; 
$sql_res = mysql_query("SELECT emp_id, name from employee3 where emp_id like '%$q%' or name like '%$q%' order by emp_id LIMIT 5 "); 
while ($row = mysql_fetch_array($sql_res)) 
{ 
$emp_id = $row['emp_id']; 
$name = $row['name']; 
$b_emp_id = '<strong>'.$q.'</strong>'; 
$b_name = '<strong>'.$q.'</strong>'; 
$fina_emp_id = str_ireplace($q, $b_emp_id, $emp_id); 
$final_name = str_ireplace($q, $b_name, $name); 
?> 
<div class="show" align="left"> 
    <span class="name"><?php echo $fina_emp_id; ?></span> 
</div> 
<?php 
} 
} 
?> 

回答

0

您傳遞了錯誤的數據格式ajax呼叫。

它應該是這樣的:

data: { search: searchid } 

試試這個,它應該工作,我相信。

參見本:http://api.jquery.com/jquery.ajax/

+0

確切位置在哪裏我都會把我的代碼先生? hehe – zuma

+0

用'data:{search:searchid}'替換這個'data:dataString' .. –

+0

它不起作用sir ...我的數據庫連接有問題嗎? – zuma