Question

名称未显示在自动填充的下拉框中
当我收到回复时，如何将每个变量分配到特定的文本框

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);

FIREBUG JSON回应：

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

Answer 1

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

您需要使用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 );
    };

Answer 2

RTFM：

来自本地数据，网址或回调的数据可以分为两部分   变体：


一串字符串：

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

您的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（禁用输入）

我无法从jquery自动完成显示json变量

2 个答案: