How do you use POST with jQuery Autocompleter?

Question

jQuery v1.2.6

jQuery.autocompleter plugin v1.1pre (from jQuery's website)

I am not able to submit with 'type: "POST"' back to my webservice. I can't get it to be recognized by the autocompleter. Thoughts?

This code below works fine, as long as I look for the "q" querystring. But, I would like to use this for more advanced features in the future by passing more params, and would appreciate how to post back using the autocompleter.

I am aware of the extraParams option. But, those are extra parameters that get submitted via GET or POST (if we can get POST working). It doesn't change it to submit as a POST.

$(function() {
 $('#searchBox').autocomplete(
  "/services/college.asmx/lookupColleges",
  {
   delay: 5,
   minChars: 1,
   matchSubset: 1,
   matchContains: 1,
   cacheLength: 10,
   autoFill: false,
   dataType: 'json',
   parse: function(data) {
    var rows = new Array();
    for (var i = 0; i < data.length; i++) {
     rows[i] = {
      data: data[i]
      , value: data[i].Data
      , result: data[i].Name
     };
    }
    return rows;
   },
   formatItem: function(row, i, n) {
    return row.Name;
   }
  }).result(function(event, row) {
   processSelection(this, row.Data);
  });
});

I tried adding the option for POST, like noted in the code sample below. But it still submits as a GET.

delay: 5,
minChars: 1,
matchSubset: 1,
matchContains: 1,
cacheLength: 10,
autoFill: false,
dataType: 'json',
type: 'POST',

Any help is appreciated.

Thank you!

PS, lots of this is undocumented, and was a PITA to figure out after trial and error. Thank goodness for Firebug.

You'll note that I am:

• receiving JSON back from the webservice
• the Autocomplete is not able to handle JSON natively, so I have to parse it into my own array.
• Since I am now passing back a custom array object, the formatItem needs to be overwritten in order to process the new array object for Displaying purposes.
• And finally the money shot, I am wanting to process the extra data on that row after the user selects a Row (mouse-click or TAB or ENTER key). I do this with the result() delegate.

I really hope the above code helps others in the future figure out the autocompleter as well. Give me a Vote Up if it does.

Tip: The property names data[i].Data and data[i].Name are the JSON property names.

Answer 1

You can set the default for ''all'' jquery ajax calls to be post and then just override them in whatever script you want. The override will probably work for this as well... Try placing this at the top of your code:

$.ajaxSetup({
    type: 'POST'
});

You can use the $.ajaxSetup() call to set defaults for any of the normal $.ajax / $.post / $.get options. I hope that helps.

Answer 2

At this time (Autocompleter 1.1pre), there isn't a way to get it to post without changing the plugin's code.

I just left it submitting querystrings for now. Thank you all for answered, I upped the vote.