我有两个文本框,我希望它们从mysql database
的两个不同列自动完成,我得到了第一个的结果,但当我对第二个使用相同的代码时,它不起作用。我在html 中的onkeyup
上调用我的autocomplet()
jQuery:
function autocomplet() {
var min_length = 0; // min caracters to display the autocomplete
var keyword = $('#clientname').val();
if (keyword.length >= min_length) {
$.ajax({
url: 'ajax_refresh.php',
type: 'POST',
data: {keyword:keyword},
success:function(data){
$('#clientlist_id').show();
$('#clientlist_id').html(data);
}
});
} else {
$('#clientlist_id').hide();
}
}
// set_item : this function will be executed when we select an item
function set_item(item) {
// change input value
$('#clientname').val(item);
// hide proposition list
$('#clientlist_id').hide();
}
function autocomplete() {
var min_lengthstaff = 0; // min caracters to display the autocomplete
var input = $('#staff').val();
if (input.length >= min_lengthstaff) {
$.ajax({
url: 'autocompletephpcode.php',
type: 'POST',
data: {input:input},
success:function(data){
$('#stafflist_id').show();
$('#stafflist_id').html(data);
}
});
} else {
$('#stafflist_id').hide();
}
}
// set_item : this function will be executed when we select an item
function set_itemstaff(items) {
// change input value
$('#staff').val(items);
// hide proposition list
$('#stafflist_id').hide();
}
ajax_refresh.php:
<?php
// PDO connect *********
function connect() {
return new PDO('mysql:host=localhost;dbname=entry', 'root', '', array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION, PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8"));
}
//for client name
$pdo = connect();
$keyword = '%'.$_POST['keyword'].'%';
$sql = "SELECT * FROM newdata WHERE client_name LIKE (:keyword) ORDER BY id ASC LIMIT 0, 10";
$query = $pdo->prepare($sql);
$query->bindParam(':keyword', $keyword, PDO::PARAM_STR);
$query->execute();
$list = $query->fetchAll();
foreach ($list as $rs) {
// put in bold the written text
$client_name = str_replace($_POST['keyword'], '<b>'.$_POST['keyword'].'</b>', $rs['client_name']);
// add new option
echo '<li onclick="set_item('''.str_replace("'", "''", $rs['client_name']).''')">'.$client_name.'</li>';
}
?>
autocompletephpcode.php:
<?php
// PDO connect *********
function connect() {
return new PDO('mysql:host=localhost;dbname=entry', 'root', '', array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION, PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8"));
}
//for staff name
$pdo = connect();
$input = '%'.$_POST['input'].'%';
$sql = "SELECT * FROM newdata WHERE staff LIKE (:input) ORDER BY id ASC LIMIT 0, 10";
$query = $pdo->prepare($sql);
$query->bindParam(':input', $input, PDO::PARAM_STR);
$query->execute();
$list = $query->fetchAll();
foreach ($list as $rs) {
// put in bold the written text
$staff = str_replace($_POST['input'], '<b>'.$_POST['input'].'</b>', $rs['staff']);
// add new option
echo '<li onclick="set_itemstaff('''.str_replace("'", "''", $rs['staff']).''')">'.$staff.'</li>';
}
?>
这是我的html-
<form id="dataentry" action="ajax_refresh.php" method="post" role="form" >
<div class="input_container">
<label for="Clientname">Client Name</label></br>
<input type="text" name="clientname" id="clientname" onkeyup="autocomplet()" />
<ul id="clientlist_id"></ul>
</div>
</form>
<form action="autocompletephpcode.php" method="post" role="form">
</div>
<div class="form-group col-md-2">
<div class="input_container">
<label for="Staff">Staff</label></br>
<input type="text" name="staff" id="staff" onkeyup="autocomplete()" />
<ul id="stafflist_id"></ul>
</div>
client_name
的相同代码不起作用!
我会这么做:
jQuery
function autocomplete_client() {
var min_length = 0; // min caracters to display the autocomplete
var keyword = $('#clientname').val();
if (keyword.length >= min_length) {
$.ajax({
url: 'ajax_refresh_client.php',
type: 'POST',
data: {keyword:keyword},
success:function(data){
$('#clientlist_id').show();
$('#clientlist_id').html(data);
}
});
} else {
$('#clientlist_id').hide();
}
}
// set_item : this function will be executed when we select an item
function set_item_client(item) {
// change input value
$('#clientname').val(item);
// hide proposition list
$('#clientlist_id').hide();
}
function autocomplete_staff() {
var min_length = 0; // min caracters to display the autocomplete
var keyword = $('#staff').val();
if (keyword.length >= min_length) {
$.ajax({
url: 'ajax_refresh_staff.php',
type: 'POST',
data: {keyword:keyword},
success:function(data){
$('#stafflist_id').show();
$('#stafflist_id').html(data);
}
});
} else {
$('#stafflist_id').hide();
}
}
// set_item : this function will be executed when we select an item
function set_item_staff(item) {
// change input value
$('#staff').val(item);
// hide proposition list
$('#stafflist_id').hide();
}
ajax_refresh_client.php
// PDO connect *********
function connect() {
return new PDO('mysql:host=localhost;dbname=entry', 'root', '', array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION, PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8"));
}
//for client name
$pdo = connect();
$keyword = '%'.$_POST['keyword'].'%';
$sql = "SELECT * FROM newdata WHERE client_name LIKE (:keyword) ORDER BY id ASC LIMIT 0, 10";
$query = $pdo->prepare($sql);
$query->bindParam(':keyword', $keyword, PDO::PARAM_STR);
$query->execute();
$list = $query->fetchAll();
foreach ($list as $rs) {
// put in bold the written text
$client_name = str_replace($_POST['keyword'], '<b>'.$_POST['keyword'].'</b>', $rs['client_name']);
// add new option
echo '<li onclick="set_item_client('''.str_replace("'", "''", $rs['client_name']).''')">'.$client_name.'</li>';
}
ajax_refresh_staff.php
// PDO connect *********
function connect() {
return new PDO('mysql:host=localhost;dbname=entry', 'root', '', array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION, PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8"));
}
//for staff name
$pdo = connect();
$keyword = '%'.$_POST['keyword'].'%';
$sql = "SELECT * FROM newdata WHERE staff LIKE (:keyword) ORDER BY id ASC LIMIT 0, 10";
$query = $pdo->prepare($sql);
$query->bindParam(':keyword', $keyword, PDO::PARAM_STR);
$query->execute();
$list = $query->fetchAll();
foreach ($list as $rs) {
// put in bold the written text
$staff = str_replace($_POST['keyword'], '<b>'.$_POST['keyword'].'</b>', $rs['staff']);
// add new option
echo '<li onclick="set_item_staff('''.str_replace("'", "''", $rs['staff']).''')">'.$staff.'</li>';
}
html
<div class="input_container">
<label for="Clientname">Client Name</label></br>
<input type="text" name="clientname" id="clientname" onkeyup="autocomplete_client()" />
<ul id="clientlist_id"></ul>
</div>
<div class="input_container">
<label for="Staff">Staff</label></br>
<input type="text" name="staff" id="staff" onkeyup="autocomplete_staff()" />
<ul id="stafflist_id"></ul>
</div>
请确保清除缓存。这个代码可能更干净,但它会起作用。