How to hookup jQuery autocomplete with POST query to remote data source?

autocomplete, jquery, jquery-autocomplete, jquery-ui, jquery-ui-autocomplete

Solution

You need to supply the results to the `respond` callback that the widget is giving you:

$( "#booking_student" ).autocomplete({
    source: function( request, respond ) {
        $.post( "/path/to/my/api.php", { student: request.term },
            function( response ) {
                respond(response);
        });
    }
});

This of course assumes that your data is an array with items containing either a `label` property, a `value` property, or both. This is outlined in the documentation for the `source` option.

Problem

I'm trying to hook up a text field to jQuery UI's autocomplete with a remote data source using a POST query. So far I have this: ``` $( "#booking_student" ).autocomplete({ source: function( request, respond ) { $.post( "/path/to/my/api.php", { student: request.term }, function( response ) { //do something } ); } }); ``` Using Firebug I can see that my API is returning the results I'd expect, but the autocomplete dropdown doesn't appear. What do I need to do to plug my results into the autocomplete dropdown? Do I need to populate a variable in the //do something section with the JSON results or?

Original source