What are the "response" and "request" arguments in jQuery UI Autocomplete's "source" callback?

Question

I'm looking at the autocomplete tutorial, and I have a few questions: http://jqueryui.com/demos/autocomplete/#option-disabled

$( "#tags" )
            // don't navigate away from the field on tab when selecting an item
            .bind( "keydown", function( event ) {
                if ( event.keyCode === $.ui.keyCode.TAB &&
                        $( this ).data( "autocomplete" ).menu.active ) {
                    event.preventDefault();
                }
            })
            .autocomplete({
                minLength: 0,
                source: function( request, response ) {
                    // delegate back to autocomplete, but extract the last term
                    response( $.ui.autocomplete.filter(
                        availableTags, extractLast( request.term ) ) );
                },
                focus: function() {
                    // prevent value inserted on focus
                    return false;
                },
                select: function( event, ui ) {
                    var terms = split( this.value );
                    // remove the current input
                    terms.pop();
                    // add the selected item
                    terms.push( ui.item.value );
                    // add placeholder to get the comma-and-space at the end
                    terms.push( "" );
                    this.value = terms.join( ", " );
                    return false;
                }
            });

So I understand the parameters for source is request and response. Are these reserved keywords? I couldn't find anything when typing this into google. I am unclear as to what is the request and response being passed into here. Is the request just grabbing the input? Where can I read up more on this?

Answer 1

No, request or response are not reserved keywords – if they were, you couldn't use them as function parameter names..

What's going on here is pretty simple, and if you ever do anything in Node you'll see the pattern. It's async JavaScript.

You're passing an anonymous function to source. This function is called whenever autocomplete needs to query the datasource (in other words, the user typed something).

The function's parameters are request and response. request is simply the information autocomplete is requesting; request.term is the query (what the user typed). It's up to you how to implement the search – maybe you have a local variable with possibilities or you might make an AJAX call to the server.

Now the important part: if you're making an AJAX call, you can't simply return a value from source() because the function will return long before the AJAX call completes. That's why there's a response parameter.

response is a function reference passed to your source() function that you call whenever you have the answer to the request. Through the magic of closures, you can call this function from inside an AJAX callback.

response (which could less confusingly be named callback) expects an array of strings or of objects with label and value properties. It will show those results in the autocomplete dropdown.

Putting it all together:

$('selector').autocomplete({
    ...
    source: function(request, response) {
        // calculate results for a query.
        response([{ label: 'Example', value: 'ex'  }]);
    }
});