What are the "response" and "query" arguments in jQuery UI that autocomplete the "original" callback?

Question

I am looking at an 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 that the parameters for the request and response source are. Are these reserved keywords? I could not find anything when I typed it on Google. I do not quite understand that a request and a response are being transmitted here. Does the request just grab the input? Where can I find out more about this?

Answer 1

request and response are just the names that the code author decided to provide to the two formal callback parameters assigned to the source autocomplete widget:

Autocomplete can be configured to work with various data sources by simply specifying the source parameter. The data source may be:

• array with local data
• a String specifying a URL
• Callback

The third option, callback, provides maximum flexibility and can be used to connect any data source to autocomplete. The callback receives two arguments:

• A request object with a single property called "term" that references the value currently in the text input. For example, when a user entered "New Daylight Saving Time" in a city field, the term Autocomplete would equal "New Year".
• A response callback that expects a single argument contains the data offered to the user. This data should be filtered based on the provided period and can be in any of the formats described above for simple local data (String-Array or Object-Array with label / value / both properties). This is important when providing a source callback to handle errors during a request. You should always call the response callback, even if you encounter an error. This ensures that the widget always has the correct state.

Answer 2

No, request or response not reserved keywords - if they were, you could not use them as function parameter names ..

What happens here is pretty simple, and if you ever do something in Node, you'll see a template. This is asynchronous JavaScript.

You pass the anonymous function source . This function is called whenever autocomplete requires a data source request (in other words, the user typed something).

Parameters of the request and response function. request is just a request to autocomplete information; request.term is the request (that the user typed). It is up to you how to implement the search - perhaps you have a local variable with capabilities or you can make an AJAX call to the server.

Now the important part: if you make an AJAX call, you cannot just return value from source() , because the function will return long before the AJAX call ends. This is why the response parameter exists.

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

response (which is called callback with the least confusion) expects an array of strings or objects with label and value properties. It will display these results in the autocomplete drop-down list.

Putting it all together:

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

Answer 3

It is clearly documented on the jQuery user interface autocomplete page.

http://jqueryui.com/demos/autocomplete/

The third option, callback, provides maximum flexibility and can be used to connect any data source to autocomplete. The callback receives two arguments:

A request object with a single property called "term" that references the value currently in the text input. For example, when a user entered "New Daylight Saving Time" in a city field, the term Autocomplete would equal "New Year".

A response callback that expects a single argument contains the data offered to the user. This data should be filtered based on the provided period and can be in any of the formats described above for simple local data (String-Array or Object-Array with label / value / both properties). This is important when providing a source callback to handle errors during a request. You should always call the response callback, even if you encounter an error. This ensures that the widget always has the correct state.