Javascript php/jQuery获取所选值的主键

我正在尝试获取表单中所选值的键（主键），以便将键添加到联接表中。我将表单从下拉列表更改为自动完成。但不知道如何使用jquery进行映射

这是我的php的自动完成

<?php
if (isset($_POST['type']) && $_POST['type'] == 'faculty_id') {

    $type = $_POST['type'];
    $name = $_POST['name_startsWith'];
    $nameID = $_POST['nameID'];


    $query = "SELECT FirstName, LastName, FacultyId FROM Test.Faculty where UPPER(FirstName) LIKE '" . strtoupper($name) . "%'";
    $result = mysqli_query($con, $query);
    $data = array();
    while ($row = mysqli_fetch_assoc($result)) {
        $name = $row['FirstName'] . ' ' . $row['LastName'];
        $nameID = $row['FacultyId'];
        array_push($data, $name);
    }
    mysqli_close($con);


    echo json_encode($data);
    exit;
}
?>

这是表单和jQuery页面

<form action="Form.php" method="post">
    <input type='text'  id="faculty_id" placeholder="Instructor" name="faculty_id" value='' />

    <input type="submit" value="submit" name="submit" />
</form>
<script type="text/javascript">

    $('#faculty_id').autocomplete({
        source: function (request, response) {
            $.ajax({
                url: 'Form.php',
                dataType: "json",
                method: 'post',
                data: {
                    name_startsWith: request.term,
                    nameID: request.term,
                    type: 'faculty_id'
                },
                success: function (data) {
                    response($.map(data, function (item) {
                        console.log(item);
                        //var code = item.split("|");
                        return {
                            label: item,
                            value: item,
                            data: item
                        }
                    }));
                }
            });
        },
        autoFocus: true,
        minLength: 1,

    });
</script>

$（“#教员id”）。自动完成({
来源：功能（请求、响应）{
$.ajax({
url:'Form.php'，
数据类型：“json”，
方法：“post”，
数据：{
name_startsWith:request.term，
nameID:request.term，
类型：“教员id”
},
成功：功能（数据）{
响应（$.map）（数据、功能（项）{
控制台日志（项目）；
//var代码=项目。拆分（“|”）；
返回{
标签：项目，
价值:项目,，
数据：项目
}
}));
}
});
},
自动对焦：对，
最小长度：1，
});

和php插入查询

<?php
if (isset($_POST)) {
    $faculty_id = $_POST['faculty_id'];
    try {
        $stat = $db->prepare("Insert into ATCTest.Schedule
                      (Faculty ) 
                      VALUE (':faculty_id' )");
        $stat->bindParam(":faculty_id", $faculty_id);

        if ($stat->execute()) {
            echo "<h5>Faculty-js: " . $faculty_id . "</h5>";
        } else {
            echo "Problem!!!";
        }
    } catch (PDOException $e) {
        echo $e->getMessage();
    }
}

保持一致。任选其一。不是两者都有。自动完成脚本使用MySQLi，但在插入脚本中使用PDO。挑一个，坚持下去
我将使用PDO，因为我发现它比MySQLi更容易使用

使用适当的请求方法。如果你得到了一些东西，使用GET not POST。如果要添加或更新，请使用POST
让我们重写自动完成脚本以使用PDO：

    if (isset($_GET['type']) && $_GET['type'] == 'faculty_id') {
        // this will hold your response that gets sent back
        $data = null;
        $name = trim($_GET['name']);

        try {
            // because you are passed untrusted data, use prepared statement 
            $sth = $db->prepare("
                SELECT FirstName, LastName, FacultyId 
                FROM Test.Faculty 
                WHERE UPPER(FirstName) LIKE UPPER(?)
            ");
            $sth->execute(array($name . '%'));
            // set the results (array of objects) as your JSON response
            $data['faculties'] = $sth->fetchAll(PDO::FETCH_OBJ);
        } catch(PDOException $e){
            echo $e->getMessage();
        }
        // send the results i.e. response
        header('Content-Type: application/json');
        echo json_encode($data);
        exit;
    }

我以前从未使用过autocomplete插件，但我会根据我看到的其他答案来尝试一下

$('#faculty_id').autocomplete({
    source: function (request, response) {
        // short syntax for .ajax() using GET method that expects a JSON response
        $.getJSON('Form.php', { type: 'faculty_id', name: request.term }, function (data) {
            // data.faculties (your AJAX script's response) should now be an array of objects
            console.log(data.faculties);
            response($.map(data.faculties, function (faculty) {
                console.log(faculty);
                return {
                    label: faculty.FirstName + ' ' + faculty.LastName,
                    value: faculty.FacultyId
                }
            }));
        });
    },
    autoFocus: true,
    minLength: 1,
});


最后，当您插入

// check if form was POSTed
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $faculty_id = $_POST['faculty_id'];
    try {
        // VALUES not VALUE
        // don't wrap your placeholders with quotes in your prepared statement
        // simplified
        $sth = $db->prepare("INSERT INTO ATCTest.Schedule(Faculty) VALUES(?)");
        // simplified way to bind parameters
        $sth->execute(array($faculty_id));
        // use rowCount() not execute() to determine if the operation was successful or not
        if ($sth->rowCount()){
            echo "<h5>Faculty-js: $faculty_id</h5>";
        } else {
            echo "Problem!!!";
        }
    } catch (PDOException $e) {
        echo $e->getMessage();
    }
}

//检查表单是否已过账
如果（$\u服务器['REQUEST\u METHOD']='POST'）{
$faculty\u id=$\u POST['faculty\u id']；
试一试{
//价值不是价值
//不要在准备好的语句中用引号括起占位符
//简化
$sth=$db->prepare（“插入ATCTest.Schedule（教员）值（？）”；
//绑定参数的简化方法
$sth->execute（数组（$u_id））；
//使用rowCount（）not execute（）确定操作是否成功
如果（$sth->rowCount（））{
echo“Faculty js:$Faculty_id”；
}否则{
回声“问题！！！”；
}
}捕获（PDO$e）{
echo$e->getMessage（）；
}
}

谢谢回复@Mikey，但自动完成不起作用。它也没有给出任何错误。请检查我上次编辑时的打字错误。如果你还没有这样做。找出问题到底发生在哪里：“是JS还是PHP，还是两者都有？”打开浏览器的开发工具（Chrome有一个漂亮的界面）从JS开始：检查控制台日志中是否有任何输出；检查网络选项卡（XHR），查看输入数据时发送的请求和响应。完成所有这些之后，请澄清您所说的“自动完成”不起作用。它起作用了，但在选择标签（名称）后会显示值（facultyId）。以及它的JS错误。我不知道如何打开错误php.ini，将更多地查找JS自动完成。