jquery 自动完成结果框很小

Question

我在自动完成用户界面方面遇到了一个奇怪的问题。我在这里搜索过，但找不到类似的内容。

http://jsfiddle.net/TYPfw/有 jquery 和 HTML，这里是 PHP。

$return_arr = array();
$param = mysql_real_escape_string($_GET['term']);
$fetch = mysql_query("SELECT * FROM customers WHERE company like '%$param%'"); 
while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
    $row_array['id'] = $row['id'];
    $row_array['company'] = $row['company'];

    array_push($return_arr,$row_array);
}

echo json_encode($return_arr);

JSON 正确输出，当您输入正确值的第一个字母时，输入框下方会显示一个很小的(2px 框)，但如果您输入数据库中不存在的内容，它就会出现离开，但当您输入内容时又回来。

我在许多其他项目中使用过类似的代码，但从未遇到过这个问题。对我所缺少的有什么想法吗？对于这么小的任务，我已经研究了太久了。

盒子图片供引用。 /image/A8wnz.jpg

Answer 1

抱歉我之前的回答，当我第一次阅读你的问题时，我没有看到 jsFiddle。

问题是您没有为返回数组的 label 属性设置值。自动完成功能需要一个包含直字符串 (["item1", "item2", "item3"]) 或具有 label 属性的对象的数组。底层自动完成代码使用 label 属性来了解要显示的内容。查看 jQuery-ui 的自定义数据示例，以更好地了解您的 json 对象应如何格式化:http://jqueryui.com/demos/autocomplete/#custom-data

目前，您返回的 JSON 看起来像这样:

[
  { id: "companyId", company: "company Name" },
  { id: "AnotherID", company: "another company" }
]

但是，您的对象没有标签属性。更改 PHP 以设置标签(而不是公司)，如下所示应该修复未填充的列表:

$return_arr = array();
$param = mysql_real_escape_string($_GET['term']);
$fetch = mysql_query("SELECT * FROM customers WHERE company like '%$param%'"); 
while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
    $row_array['id'] = $row['id'];
    $row_array['label'] = $row['company'];

    array_push($return_arr,$row_array);
}

echo json_encode($return_arr);

并且，您需要更新 JavaScript 以适应新格式:

$(function() {
    $("#company").autocomplete({
        source: "bin/view_customers.php",
        minLength: 1,
        select: function(event, ui) {
            $('#id').val(ui.item.id);
            $('#company').val(ui.item.label);
        }
    });
});