我无法显示来自 jquery 自动完成的 json 变量答案

【问题标题】：I am having trouble to display the json variables from jquery autocomplete我无法显示来自 jquery 自动完成的 json 变量
【发布时间】：2012-03-23 00:14:03
【问题描述】：

名称未显示在自动完成的下拉框中
当我得到响应时，如何将每个变量分配给特定的文本框

HTML：

<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</head>
<body style="font-size:62.5%;">
<input type="text" id="name" />
<input type="text" id="id" />
<input type="text" id="tel" />
<script> $("#name").autocomplete({ source: "php/company.php" });  </script>
</body>
</html>

PHP：

$term = strtolower($_GET["term"]);

$sql = "select ID,NAME,TEL from COMPANY where NAME like '%$term%' order by NAME";
$result = mysql_query($sql, DBCONN) or die ("<br>MySQL Error: " . mysql_error(DBCONN));
while($row = mysql_fetch_array($result)) 
{
    $row_set = array( 
                "label" => $row['NAME'], 
                "id" => $row['ID'],
                "tell" => $row['TEL'] );
}
echo json_encode($row_set);

萤火虫 JSON 响应：

{"label":"MacDonald","id":"1","tel":"1-800-4444"}

【问题讨论】：

标签： jquery json autocomplete

【解决方案1】：

RTFM:

来自本地数据、url 或回调的数据可以分为两种变种：

字符串数组：

具有标签和值属性的对象数组

您的 json 响应并不是真正的数组，是吗？此外，您只能更新一个字段的自动完成功能。

$("#name").autocomplete({ source: function callback(term, autocomplete) {
    $.getJSON("php/company.php?term="+term, function(data) {
        // do the magic here: extract an option array from your data, e.g.
        var arrayOfStrings = data.names;
        autocomplete(arrayOfStrings);
    });
});

我不明白您想对其他数据做什么，在您的数据库中搜索特定名称时，您将无法自动完成电话号码输入字段，对吗？

编辑：您的问题是您的 json 响应当前确实将最后一个匹配名称输出为对象。如果您改为返回一个数组，则自动完成功能会很有用。修复了几个错误：

$term = mysql_real_escape_string(strtolower($_GET["term"]));

$sql = "select ID,NAME,TEL from COMPANY where NAME like '%$term%' order by NAME";
$result = mysql_query($sql, DBCONN) or die ("{\"error\":\"" . mysql_error(DBCONN) . "\"}");
$output = array();
while($row = mysql_fetch_array($result)) {
    $row_set = array( 
        "label" => $row['NAME'], 
        "value" => $row['NAME'], 
        "id" => $row['ID'],
        "tell" => $row['TEL'] );
    $output[] = $row_set;
}
echo json_encode($output);

如果您通过调整后的 ajax 调用（见上文）使其成为自定义回调函数，您现在可以在尝试提取数组之前检查 data.error。

现在您可能想要使用自定义项目显示、焦点和选择事件。例如与

.data( "autocomplete" )._renderItem（参见链接示例的来源）您可以显示自定义列表项
在.autocomplete({focus:...}) 上，您可以将#id 和#tel 设置为其对应的值，并且
在.autocomplete({select:...}) 上，您可以冻结#id 和#tel（禁用输入）

【讨论】：

当我得到公司名称时，我想得到电话号码也显示在电话文本框中
自动完成的意义是获得不止一个（公司）名称——你想用多个id/电话号码做什么？
我想将公司的电话和id传递给其他输入。 Tnxx 对你的回答很有帮助！

【解决方案2】：

默认情况下，插件需要一个字符串数组，而不是对象。

您需要使用custom data rendering。

$("#name").autocomplete({
        ....
        focus: function( event, ui ) {
            $( "#name" ).val( ui.item.label );
            return false;
        }
        ....
    })
    .data( "autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( "<a>" + item.label + "<br>" + item.id + "</a>" )
            .appendTo( ul );
    };

【讨论】：

我更改了我的代码，但仍然没有任何反应，也许错误在我的 php 响应中？？ $("input#autocomplete") .autocomplete({ source: "php/company.php", minLength: 0, focus: function( event, ui ) { $( "#autocomplete" ).val( ui.item.label ); return false; }, select: function( event, ui ) { $( "#autocomplete" ).val( ui.item.label ); return false; } }) .data( "autocomplete" )._renderItem = function( ul, item ) { return $( "<li></li>" ) .data( "item.autocomplete", item ) .append( "<a>" + item.label + "<br>" + item.desc + "</a>" ) .appendTo( ul ); };