What does autocomplete request/server response look like?

What parameter is passed to the server

You need to pass request.term to your server-side code (from the documentation):

A request object, with a single
property called “term”, which refers
to the value currently in the text
input.

Basically, in your autocomplete code, you’ll have something like this:

$("#autocomplete").autocomplete({
    // request.term needs to be passed up to the server.
    source: function(request, response) { ... }
});

and what should the JSON response look
like?

The autocomplete widget expects an array of JSON objects with label and value properties (although if you just specify value, it will be used as the label). So in the simplest case, you can just return data that looks like this:

[
    { label: 'C++', value: 'C++' }, 
    { label: 'Java', value: 'Java' }
    { label: 'COBOL', value: 'COBOL' }
]

If you need something more complicated, you can use the success argument of the $.ajax function to normalize the data you get back before the autocomplete gets it:

source: function( request, response ) {
    $.ajax({
        /* Snip */
        success: function(data) {
            response($.map( data.geonames, function( item ) {
                return {
                    label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                    value: item.name
                }
            }));
         }
    });

This code is taken from the example here (This is a good example overall of ajax + autocomplete works in a more complex scenario).

Basically, what’s going is that upon a successful ajax request, the data received is being normalized (using $.map) to what the autocomplete widget expects.

Hope that helps.

Leave a Comment