两个txtbox使用data{keyword:keyword}$.ajax自动完成


Two txtbox autocomplete using data{keyword:keyword} $.ajax

我有两个文本框,我希望它们从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>

请确保清除缓存。这个代码可能更干净,但它会起作用。