CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-autocomplete
lowerkey
lowerkey

Reputation: 8325

jquery Autocomplete doesn't display autcomplete list

I wrote the following code to customize jquery's autocomplete plugin. 

var NOID = -1;
var selectedRoleID = NOID;
$('#roles').autocomplete({
    source: function(request, response){
        $.ajax({
            url: '/autocompleteRoles',
            dataType: 'json',
            data: {
                term: request.term,
                institutionID: selectedInstitutionID
            },
            success: response,
            error: function( jxhr, textStatus, errorThrown){
                alert(textStatus);
                            alert(errorThrown);
            }
        });
    },
    focus: function( event, ui ){
        $('#roles').val( ui.item.label );
        return false;
    }, 
    select: function( event, ui ){
        $('#roles').val( ui.item.label );
        selectedRoleID = ui.item.value;
        $('#roleID<%= id %>').val( ui.item.value );
        return false;
    }
});

Observing the get request, I get the following response from the server when "St" is typed into the roles input: [{"label":"Student","value":1}]

However, for some reason, no autocomplete list is displayed.

Edit: Upon changing the error handler as suggested, I got the following alerts: 1. parseError, and 2. Error: jQuery17105143003379926085_1330435243607 was not called

Upvotes: 2

Views: 4116

Answers (2)

lowerkey
lowerkey

Reputation: 8325

I found the answer.

The datatype needs to be jsonp, and the server needs to return jsonp data. I followed this tutorial: http://niryariv.wordpress.com/2009/05/05/jsonp-quickly/

The response now reads: jQuery17105373439881950617_1330436905475([{"label":"Student","value":1}])

And the autcomplete options look like this:

$('#roles').autocomplete({
    source: function(request, response){
        $.ajax({
            url: '/autocompleteRoles',
            dataType: 'jsonp',
            data: {
                term: request.term,
                institutionID: selectedInstitutionID
            },
            success: function(data){
                response(data);
            },
            error: function(jqXHR, textStatus, errorThrown){
                alert(textStatus);
                alert(errorThrown);
            }
        });

    },
    focus: function( event, ui ){
        $('#roles').val( ui.item.label );
        return false;
    }, 
    select: function( event, ui ){
        $('#roles<%= id %>').val( ui.item.label );
        selectedRoleID = ui.item.value;
        $('#roleID<%= id %>').val( ui.item.value );
        return false;
    }
});

Upvotes: 3

Russ Clarke
Russ Clarke

Reputation: 17909

In the first instance apart from checking paths, I'd change your error handler to something like:

error:function(jqXHR, textStatus, errorThrown) {
    alert(textStatus);
    alert(errorThrown);
}

This should at least identify any specific errors in the call out.

Also, try commenting out the focus and select events.

Lastly, try copying the demo from here, and making sure it works with a static list of values: http://jqueryui.com/demos/autocomplete/ (just click view source)

Upvotes: 1

Related Questions