-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"> 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
}
}
?>
確切位置在哪裏我都會把我的代碼先生? hehe – zuma
用'data:{search:searchid}'替換這個'data:dataString' .. –
它不起作用sir ...我的數據庫連接有問題嗎? – zuma