Question

我对自动完成UI有一个奇怪的问题。我在这里搜索过，找不到类似的东西。

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正确输出，当你输入正确值的第一个字母时，输入框下会出现一个TINY little（2px框），但是如果你键入了db中不存在的东西，它就会出现离开，但在你打字的时候会回来。

我在许多其他项目中使用过类似的代码，但我从未遇到过这个问题。关于我缺少什么的任何想法？一直在为这么小的任务看这个。

框图片供参考。 http://imgur.com/iwLlk

Answer 1

对不起我以前的回答，当我第一次看到你的问题时，我没有看到jsFiddle。

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

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

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

但是，您的对象没有label属性。更改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);
        }
    });
});

jquery自动完成结果框很小

1 个答案: