首页 文章

使用URL源的jQuery-UI自动完成使用字符串数组但不是对象数组

提问于
浏览
1

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

数组:数组可用于本地数据 . 有两种支持的格式:字符串数组:[“Choice1”,“Choice2”]具有标签和值属性的对象数组:[{label:“Choice1”,value:“value1”},...]

此外,source属性可以是使用如上所示格式化的JSON数据响应的URL:

String:使用字符串时,Autocomplete插件希望该字符串指向将返回JSON数据的URL资源 . 它可以位于同一主机上,也可以位于不同的主机上(必须提供JSONP) . 自动完成插件不会过滤结果,而是使用术语字段添加查询字符串,服务器端脚本应使用该字段来过滤结果 . 例如,如果source选项设置为“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不会抛出任何错误 .

2 回答

  • 2

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

    这是您的JSON的有效版本:

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

    您可以使用json_encode()代替

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

相关问题