jquery autocomplete with PHP and JSON not working

Question

I must be missing something. I have a simple jquery autocomplete:

$("input#txtApplicationName").autocomplete({
            source: "ApplicationProcess.php",
            minLength: 2,
            select: function (event, ui) {
                alert(ui.item.id);
                alert(ui.item.name);
                //$('#state_id').val(ui.item.id);
                //$('#abbrev').val(ui.item.abbrev);
            }
        });

And here is the full contents of ApplicationProcess.php:

<?
echo '[{"id":1,"name":"Generate Ideas"},{"id":2,"name":"Define Products"}]';
?>

When I type text into my autocomplete field (txtApplicationName), I get nothing. No hints appear below the box.

And just so you know that my js and html is fine, if I substitute the jquery above with this:

$("input#txtApplicationName").autocomplete({
    source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"]
});

...it works fine.

What am I doing wrong? Is the JSON in my php malformed or something? If I hit that php file directly from the browser, it spits out the JSON as expected, no errors.

Have you tried to take a look at the AJAX response with developer tools (i.e. Firebug)? — Radek Suski
– Radek Suski, Commented Mar 30, 2012 at 16:51
As a followup to Radek, substitue ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] in your php echo statement...does that work? — Todd Murray
– Todd Murray, Commented Mar 30, 2012 at 16:55
@RadekSuski: I'm kind of amateur with firebug. How exactly do I look at the AJAX response? Also, as I mentioned, the JSON spits out fine when I request the PHP file from a browser. — HerrimanCoder
– HerrimanCoder, Commented Mar 30, 2012 at 16:56
It'is in the network tab of firefox. You can display them either by viewing ALL network activities or XHR activities. Then unfold your query and check the response body — grifos
– grifos, Commented Mar 30, 2012 at 16:59
Todd: Yes! When I substitute in the PHP it works...but that doesn't really help me. I need access to those data structures that include id and name. Is the JSON wrong? Or is my jquery wrong? — HerrimanCoder
– HerrimanCoder, Commented Mar 30, 2012 at 16:59

Radek Suski · Accepted Answer · 2012-03-30 17:54:00Z

1

I think the main problem is that the example you are used is expecting a normal array.

You have created a multidimensional array as response.

Try for example this in you php script:

$values = array( 'Generate Ideas', 'Define Products' );
echo json_encode( $values );

Edit: If you need to have a multidimensional array you have to define an id => value pair.

$values = array(
    array( 'id' => 0, 'label' => 'Generate Ideas' ),
    array( 'id'=> 1, 'label' => 'Define Products' ),
);
echo json_encode( $values );

And fit the JavaScript code:

jQuery().ready( function () {
    jQuery( '#txtApplicationName' ).autocomplete( {
        minLength:2,
        source:function ( request, response ) {
            jQuery.ajax( {
                url:'ApplicationProcess.php',
                dataType:"json",
                success:function ( data ) {
                    response( data );
                }
            } );
        }
    } );
} );

edited Mar 30, 2012 at 17:54

answered Mar 30, 2012 at 17:29

Radek Suski

1,3642 gold badges13 silver badges25 bronze badges

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

1 Comment

HerrimanCoder Over a year ago

Radek, your suggestion looks promising but it doesn't work. I still have the same problem. I wonder if anyone has an actual working example in which a multidimensional array is consumed by jquery autocomplete. I'm beginning to doubt this works.

grifos · Accepted Answer · 2012-03-30 17:02:19Z

0

Maybe it is your JSON that is not valid. I'm not sure you have to put " char for the name of the param:

[{id:1,name:"Generate Ideas"},{id:2,name:"Define Products"}]

I mean, i really think this is not necessary. Edit: Yeah you don't have to, remove them

answered Mar 30, 2012 at 17:02

grifos

3,4111 gold badge18 silver badges14 bronze badges

1 Comment

HerrimanCoder Over a year ago

I tried emitting this from my php: echo '[{id:1,name:"Generate Ideas"},{id:2,name:"Define Products"}]'; -- no luck, same problem

HerrimanCoder · Accepted Answer · 2012-04-04 15:09:44Z

0

The problem turned out to be "name" in the JSON. When I change "name" to any other word, everything works.

This works fine: echo '[{"id":1,"value":"Generate Ideas"},{"id":2,"value":"Define Products"}]';

I wonder how many people are aware of this oddity. Is it a bug in jquery?

answered Apr 4, 2012 at 15:09

HerrimanCoder

7,36430 gold badges95 silver badges173 bronze badges

Comments

HerrimanCoder · Accepted Answer · 2012-04-24 14:36:11Z

0

It turned out that there was a colliding .js reference in my web page that was causing this problem. Sorry everyone.

answered Apr 24, 2012 at 14:36

HerrimanCoder

7,36430 gold badges95 silver badges173 bronze badges

Collectives™ on Stack Overflow

jquery autocomplete with PHP and JSON not working

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related