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

Question

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?

Answer 1

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.