使用 jQuery 1.7.2 和 jQuery UI 1.8.18。如果我使用本地数据作为源属性,一切都会按预期工作。根据文档,源数组可以是字符串值数组或对象数组:
数组:数组可用于本地数据。有两种支持的格式:
字符串数组:[ "Choice1", "Choice2" ]
具有标签和值属性的对象数组: [ { label: "Choice1", value: "value1" }, ... ]
此外,源属性可以是响应格式为如上所示的 JSON 数据的 URL:
字符串:使用字符串时,自动完成插件期望该字符串指向将返回 JSON 数据的 URL 资源。它可以在同一台主机上,也可以在不同的主机上(必须提供 JSONP)。自动完成插件不过滤结果,而是添加了一个带有术语字段的查询字符串,服务器端脚本应该使用它来过滤结果。例如,如果源选项设置为“http://example.com”并且用户键入 foo,则会向http://example.com?term=foo发出 GET 请求。数据本身可以采用与上述本地数据相同的格式。
如果我的 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 不会抛出任何错误。