CODEWITHSUNDEEP
phpjqueryjson
HerrimanCoder
HerrimanCoder

Reputation: 7218

jquery autocomplete with PHP and JSON not working

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.

Upvotes: 1

Views: 1249

Answers (4)

HerrimanCoder
HerrimanCoder

Reputation: 7218

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

Upvotes: 0

HerrimanCoder
HerrimanCoder

Reputation: 7218

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?

Upvotes: 0

Radek Suski
Radek Suski

Reputation: 1392

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

Upvotes: 1

grifos
grifos

Reputation: 3381

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

Upvotes: 0

Related Questions