Question

I am using the jquery autocomple plugin like this

$( "#city" ).autocomplete({
            source: function( request, response ) {
                $.ajax({
                    url: "http://www.abc.com/test.php",
                    dataType: "jsonp",
                    data: {
                        featureClass: "P",
                        style: "full",
                        maxRows: 12,
                        name_startsWith: request.term
                    },
                    success: function( data ) {
                        alert("hello");
                    }
                });
            },
            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" );
            }
        });

I am not getting any alertbox on success.

The firefox is showing that i getting this as response

[{"label":"mark2","value":1},{"label":"abc1","value":20}]

Does it expect anything else in return

Answer 1

Given that the example you’ve taken this from works fine, and replicating the same example using jsfiddle works as expected, the reason your one is not working is likely that you have a javascript error elsewhere in your page which is stopping further javascript executing.

Also, I replicated the example with your change of just putting an alert in the success callback – this also works fine however you should note that the docs for jQueryUI autocomplete states that:

It’s important when providing a custom source callback to handle errors during the request. You must always call the response callback even if you encounter an error. This ensures that the widget always has the correct state.

Not that that is your error, but it’s worth noting!

---

EDIT A thought occured to me, if your ajax call is actually generating a server-side error (http500) then you’ll never enter the success callback, and never get your alert. Try adding an error callback to the ajax call to see if this is the case:

$.ajax({
    url: "http://www.abc.com/test.php",
    dataType: "jsonp",
    data: {
        featureClass: "P",
        style: "full",
        maxRows: 12,
        name_startsWith: request.term
    },
    success: function( data ) {
        alert("hello");
    },
    error: function (xhr, textStatus, errorThrown){
        alert("error: " + errorThrown);
    }
});