jQuery UI 自动完成不会显示返回的 json (PHP)

Question

jQuery:

$("[type=text]").autocomplete({
source: "json.php",
minLength: 0
}).addClass("ui-widget ui-widget-content ui-corner-left");

如果我将 source: 更改为 JS 数组，则 工作正常。我知道 php 正在工作，因为我可以在控制台中看到它，但无论如何，这里是示例 php：

$arr = array ('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);
echo json_encode($arr);

所以下拉列表没有显示。现在想想都觉得自己好傻。

Answer 1

在 json.php 文件中，请务必在 echo 之前通过 header() 函数将内容编码设置为 json。这样 jQuery 应该将数组视为正确的 json。

header("Content-Type: application/json");
$arr = array ('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);
echo json_encode($arr);

Answer 2

几天前，我也遇到了 JSON 填充自动完成的问题。

我的问题是我没有设置内容类型，正如 Wally 上面所说：

header("Content-Type: application/json");

我还将 jQuery 自动完成调用包装在 getJSON 中，然后使用该函数中的数据填充自动完成字段。我的直觉告诉我，额外的 getJSON 应该是不必要的，但像你一样，我在引用我的 PHP 文件作为源时遇到了问题。

$.getJSON("json.php", function(data) {
    $("[type=text]").autocomplete({
        dataType: "json",
        source: data,
        minLength: 1,
    }); 
});

由于我使用的是旧的 PHP 版本，因此我手工制作了 JSON。我包含“标签”和“值”字段，因为我相当确定它们对于自动完成工作是必需的。

$jsonList = "[{"label" : "Item 1", "value" : "1"}, {"label" : "Item 2", "value" : "2"}]";
return $jsonList;

Answer 3

http://jqueryui.com/demos/autocomplete/remote-jsonp.html

检查这个从演示站点获取的内容。

$( "#city" ).autocomplete({
            source: function( request, response ) {
                $.ajax({
                    url: "http://ws.geonames.org/searchJSON",
                    dataType: "jsonp",
                    data: {
                        featureClass: "P",
                        style: "full",
                        maxRows: 12,
                        name_startsWith: request.term
                    },
                    success: function( data ) {
                        response( $.map( data.geonames, function( item ) {
                            return {
                                label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                                value: item.name
                            }
                        }));
                    }
                });
            },
            minLength: 2,
            select: function( event, ui ) {
                log( ui.item ?
                    "Selected: " + ui.item.label :
                    "Nothing selected, input was " + this.value);
            },
            open: function() {
                $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
            },
            close: function() {
                $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
            }
        });