Question

I’m trying to configure the autocomplete plugin so it will send an additional parameter along with the search. I looked into the autcomplete search event, but didn’t find documentation on what such a function needs to do, in order for the plugin to work.

I tried inserting a console.log(…) into the search event, but it doesn’t appear in the console.

To clarify, I’d like to modify the parameters that get sent to the server when a letter is entered.

The code I have so far is this:

$('#contacts').autocomplete({
        source: 'autocompleteContacts',
        focus: function( event, ui ) {
            $( "#contacts" ).val( ui.item.label );
            return false;
        },
        select: function( event, ui ){
            $( "#contacts" ).val( ui.item.label );
            selectedID = ui.item.value;
            return false;
        },
        search: function( event, ui ){
            var str = '';
            for(var attr in event){
                str += attr.toString() + '\n';
            }
            console.log(str);

            var str2 = '';
            for(var attr in ui){
                str2 += attr.toString() + '\n';
            }
            console.log(str2);
        }
    });

But as I said, nothing shows up in the console, although the autocomplete works as usual.

Answer 1

I think what you’re looking for is the source option. You can specify your own function that performs a search:

$("#autocomplete").autocomplete({
    source: function (request, response) {
    /* request.term is the search term, response is a callback function your 
       code must call with the results */
        $.ajax({
            url: "your_source_url",
            dataType: "json",
            data: {
                term: request.term,
                myData: "foobar"
            },
            success: response,
            error: function() {
                response([]);
            }
        });
    }
});

The remote with JSONP example is a good starting point.