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

Question

The jQuery:

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

Works fine if I change the source: to a JS array. I know that the php is working because I can see it in the console, but here is the sample php anyways:

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

So the dropdown just isn't displaying. Feeling pretty stupid right about now.

Answer 1

In your json.php file, be sure to set the content encoding to be json via the header() function before your echo. This way jQuery should see the array as proper json.

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

Answer 2

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

Check this get from demos site.

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

Answer 3

A few days ago I was also having problems with a JSON-populated Autocomplete.

My problem was that I wasn't setting the content-type, as Wally said above:

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

I also wrapped my jQuery autocomplete call inside a getJSON, then used the data from that function to populate the autocomplete field. My gut tells me that the extra getJSON shouldn't be necessary, but like you, I was having problems referencing my PHP file as the source.

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

Since I'm using an old PHP version, I hand-made my JSON. I included "label" and "value" fields because I'm fairly certain they're necessary for the autocomplete to work.

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