jQuery自动完成后从MySQL数据库中检索数据

Question

我已经在我的网站上实现了运行良好的 jQuery 自动完成功能。但是，我想使用自动完成的结果从数据库中检索所选人员的电话号码。

数据库结构是这样的；

id | name | type | tel | mobile | email | level
===============================================
1 | John Smith | judge | 01234 567890 | 07812 345678 | jsmith@example.com | BS Two Star

这是我目前更新的代码

自动完成功能

<script>
jQuery(document).ready(function($) {
    $('#inputChiefJudge').autocomplete({
        source:'lookups/shows-sj-searchforjudge.php',
        change: function (event, ui) {
            $.ajax({
                type: POST,
                url: 'lookups/shows-sj-findtel.php',
                data: 'id='+ id,
                success: function(data) {
                    details = $.parseJSON(data);
                    $('#inputChiefJudge').text("hello");
                    $('#chiefjudgetel').text(details);
                },
            });
        },
        minLength:2});
});
</script> 

查找/shows-sj-findtel.php

<?php
include("config.php");
mysql_connect ($DbHost, $DbUser, $DbPass);
mysql_select_db ("equilive_manager");
$id = $POST["id"];
$result = mysql_query("SELECT tel, mob FROM officials WHERE id='{$id}'");
$judgerow = mysql_fetch_array($result, MYSQL_ASSOC);

$contactdetails[] = array(
'tel' => $row['tel'],
'mob' => $row['mob'],
);

echo json_encode($data);
flush();
?>

查找/shows-sj-searchforjudge.php

<?php
// if the 'term' variable is not sent with the request, exit
if ( !isset($_REQUEST['term']) ) exit;

// connect to the database server and select the appropriate database for use
include("../config.php");
mysql_connect ($DbHost, $DbUser, $DbPass) or die ('I cannot connect to the database because: ' . mysql_error());
mysql_select_db ("equilive_manager");

// query the database table for name that match 'term'
$term = mysql_real_escape_string($_REQUEST['term']);
$rs = mysql_query("SELECT id, name, level FROM officials WHERE name LIKE '%{$term}%' ORDER BY name LIMIT 0,10");

// loop through each name returned and format the response for jQuery
$data = array();
if ( $rs && mysql_num_rows($rs) )
{
    while( $row = mysql_fetch_array($rs, MYSQL_ASSOC) )
    {
        $data[] = array(
            'label' => $row['name'] .', '. $row['level'],
            'value' => $row['name'],
            'id' => $row['id'],
        );
    }
}

// jQuery wants JSON data
echo json_encode($data);
flush();

提前致谢， 克雷格

Answer 1

至少在代码中存在一个问题，那就是在 getChiefJudgeContactDetails() 中，您将 javascript 与 php 混合在一起。如果这是您第一次输出页面并且代码位于 PHP 页面上，则将两者混合使用效果很好。但是，如果您希望 javascript 在每次从自动完成触发更改事件时运行 PHP 代码，那么这将行不通。

像其他人所说的那样使用 select 事件，在其中，向与自动完成类似的端点发出 ajax 请求，但将选项的值发送给它（例如 ID 值 2）。然后在 PHP 脚本中使用 SQL 来获取该 id 的行并将其作为 json 对象返回。在 jquery ajax 调用结果处理程序中解析结果并更新 UI。

更新：

将您的自动完成更改为如下所示

<script>
jQuery(document).ready(function($) {
    $('#inputChiefJudge').autocomplete({
        source:'lookups/shows-sj-searchforjudge.php',
        select: function (event, ui) {
            $.ajax({
                type: POST,
                url: 'lookups/shows-sj-findtel.php',
                data: {id:id},
                success: function(data) {
                    details = $.parseJSON(data);
                    $('#inputChiefJudge').text("hello");
                    $('#chiefjudgetel').text(details);
                },
            });
        },
        minLength:2});
});
</script> 

不要使用自动完成的 change 选项，而是使用 select（如您问题的其他答案所述）。此外，不要使用字符串 ("id="+id) 作为数据，而是使用 js 对象 ({id:id})。 jquery 将在发送到服务器之前正确处理序列化它，结果是它实际上在你的 php 脚本中显示为一个 post 变量。

另外，作为补充说明，我建议考虑使用 PDO 驱动程序 (http://www.php.net/manual/en/pdo.prepare.php) 来访问您的数据库，而不是使用 mysql_* 命令。它是面向对象的，并且还自动提供旧命令中没有的安全功能，例如防止 SQL 注入攻击。

Answer 2

你应该使用自动完成的“选择”事件：

http://api.jqueryui.com/autocomplete/#event-select

Answer 3

您可以在 select option 或 autoComplete 中进行操作。

您需要做的就是发送新的 ajax 请求以获取选定的人员编号。

select: function (event, ui)
{
   //make $.ajax request and send selected value.
   //you can send selected value using => ui.item.value
}