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

【问题标题】：jQuery UI autocomplete wont display returned json (PHP)jQuery UI 自动完成不会显示返回的 json (PHP)
【发布时间】：2011-08-17 22:39:02
【问题描述】：

jQuery：

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

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

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

所以下拉菜单没有显示。现在感觉自己很傻。

【问题讨论】：

PHP 中的 JSON 被编码为一个对象，而不是一个数组。我对 jQuery.autocomplete 并不十分熟悉，但它是否需要一个数组？ {'a': 1, 'b': 2, 'c': 3} vs ['a', 'b', 'c']
即使我尝试从 php 页面返回：echo "['opt1','opt2','opt3','opt4']";，它也没有做任何事情。我还尝试将 dataType: "json", 添加到选项中，但什么也没有。
问题是你的json对象需要'label'或'value'属性来自动渲染，否则你需要一个自定义的选择函数

标签： php jquery json user-interface autocomplete

【解决方案1】：

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" );
            }
        });

【讨论】：

我不这么认为，我在控制台中得到了响应文本。
是的，但是您不在控制台中执行此代码？什么是网站结构？ /subpage/my_form.php 和 /subpage/json.php，你能得到这样的 json.php 吗？检查浏览器中的 javascript 错误
正在谈论浏览器的控制台窗口（实际上是 firebug）。无论如何 json.php 在同一个目录中，我尝试了你上面建议的 - 仍然没有。我看到 responsetext，但页面上没有任何反应。
是的，我看到了，但我不知道后端是什么样子，我想我需要如何解析 json，我只是不知道。
@jreed121 这是ws.geonames.org/searchJSON 的后端：{"totalResultsCount":0,"geonames":[]}

【解决方案2】：

在您的 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);

【讨论】：

我加了，还是什么都没有。

【解决方案3】：

几天前，我在使用 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;

【讨论】：