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>

查找/显示-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();
?>

查找/显示-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>

使用选择（如您问题的其他答案所述），而不是使用自动填充的更改选项。此外，不使用字符串（“id =”+ id）作为数据，而是使用js对象（{id：id}）。 jquery会在发送到服务器之前处理它的正确序列化，结果是它实际上在php脚本中显示为post变量。

另外，作为更多的旁注，我建议使用PDO驱动程序（http://www.php.net/manual/en/pdo.prepare.php）来访问数据库，而不是使用mysql_ *命令。它是面向对象的，并且还自动提供旧命令中不可用的安全功能，例如防止SQL注入攻击。

Answer 2

您可以在select option的{{1}}内完成。

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

autoComplete

Answer 3

您应该使用自动填充的“选择”事件：

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

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

3 个答案:

更新