使用 URL 源的 jQuery-UI 自动完成功能适用于字符串数组，但不适用于对象数组

Question

使用 jQuery 1.7.2 和 jQuery UI 1.8.18。如果我使用本地数据作为源属性，一切都会按预期工作。根据文档，源数组可以是字符串值数组或对象数组：

数组：数组可用于本地数据。有两种支持 格式：

一个字符串数组：[ "Choice1", "Choice2" ]

具有标签和值属性的对象数组： [ { label: "Choice1", value: "值1" }, ... ]

另外，source 属性可以是一个响应 JSON 数据的 URL，格式如上所示：

字符串：当使用字符串时，自动完成插件期望 指向将返回 JSON 数据的 URL 资源的字符串。它可以 位于同一主机或不同主机上（必须提供 JSONP）。这 自动完成插件不过滤结果，而是一个查询 string 添加了一个 term 字段，服务器端脚本应该 用于过滤结果。例如，如果源选项是 设置为“http://example.com”，用户输入 foo，一个 GET 请求 将发送到http://example.com?term=foo。数据本身可以 与上述本地数据的格式相同。

如果我的 JSON 响应程序返回一个简单的字符串数组，那么自动完成功能将完全正常工作。但是，如果我的 JSON 响应程序返回一个按上述格式设置的对象数组，则会向 URL 发出请求，但永远不会填充下拉列表。 JavaScript 控制台没有显示任何错误。

自动完成调用如下所示：

var source_url = '/json/codes.php?type=globalcode&cid=25';
$('.gcode').autocomplete({
        minLength: 2,
        source: source_url
});

响应器是用 PHP 编写的。在我解决这个问题之前，它只是一个存根：

header('Content-Type: application/json, charset=UTF-8');
...
if( !$_REQUEST['type'] || !$_REQUEST['cid'] ){
        echo('[]');
        return false;
}
if( $_REQUEST['type'] == 'globalcode' ){
        $cid = sprintf("%d", $_REQUEST['cid']);
        $stub = "[ { label: 'Label for 1234', value: '1234' }, { label: 'Label for 5678', value: '5678' } ]";

        echo( $stub );
        return false;
}

同样，当数据是本地数据时，它适用于两种类型的数组，而当数据是远程数据时，它适用于字符串值数组。当数据是一个远程对象数组时，列表永远不会被填充并且 JavaScript 不会抛出任何错误。

Answer 1

您的 JSON 无效，这从未在控制台中记录。 JSON 不能有single quotes，使用双引号，也可以使用JSONLint 来检查你的 JSON。

这是您的 JSON 的有效版本：

[
  {
    "label": "Labelfor1234",
    "value": "1234"
  },
  {
    "label": "Labelfor5678",
    "value": "5678"
  }
]

Answer 2

你可以使用 json_encode() 代替

$stub = array(
 array(
    "label"=>"Labelfor1234",
    "value"=>"1234"
 ),
 array(
    "label"=>"Labelfor5678",
    "value"=>"5678"
 )
);
echo json_encode($stub);