jQuery UI autocomplete wont display returned 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.

The JSON from your PHP is being encoded to a object, not an array. I'm not intimately familiar with jQuery.autocomplete, but is it expecting an array instead? {'a': 1, 'b': 2, 'c': 3} vs ['a', 'b', 'c'] — drowe
– drowe, Commented May 3, 2011 at 18:15
Even when i try to return: echo "['opt1','opt2','opt3','opt4']"; from the php page, it doesn't do anything. I've also tried adding dataType: "json", to the options and nothing. — jreed121
– jreed121, Commented May 3, 2011 at 18:43
the problem is that you need 'label' or 'value' property in your json object to make the render automatically otherwise you need a custom select function — Dalen
– Dalen, Commented May 3, 2011 at 21:02

Wally Lawless · Accepted Answer · 2011-05-03 20:10:32Z

2

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

answered May 3, 2011 at 20:10

Wally Lawless

7,5777 gold badges41 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jreed121 Over a year ago

I added it, but still nothing.

Charles R · Accepted Answer · 2011-05-06 16:21:40Z

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;

gmadd · Accepted Answer · 2012-01-10 12:09:39Z

1

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

edited Jan 10, 2012 at 12:09

gmadd

1,1529 silver badges18 bronze badges

answered May 3, 2011 at 19:40

Dinatih

2,4761 gold badge21 silver badges21 bronze badges

7 Comments

jreed121 Over a year ago

I don't think so, I'm getting the response text in the console.

Dinatih Over a year ago

Yes, but you don't execute this code in your console ? What is the site structure ? /subpage/my_form.php and /subpage/json.php, can you get the json.php like that ? Check your javascript error in your browser

jreed121 Over a year ago

Was talking about the browser's console window (actually firebug). Anyways json.php is in the same dir and I tried what you had suggested above - still nothing. I see responsetext but nothing happens on the page.

jreed121 Over a year ago

yeah, i saw that but I have no idea what that back end looks like, I figured I'll need to parse the json some how, I just have no clue.

Dinatih Over a year ago

@jreed121 This is the backend at ws.geonames.org/searchJSON :{"totalResultsCount":0,"geonames":[]}

|

Collectives™ on Stack Overflow

jQuery UI autocomplete wont display returned json (PHP)

3 Answers 3

1 Comment

Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related