Here is an example

For this to work you need to include jQueryUI 1.8+, since 1.7 doesn’t have autocomplete in it.

Adding Autocomplete to a form is done using edittype:"custom" option of a colModel. You are required to specify editoptions, which is just an object with two keys: custom_element and custom_value

custom_element is a callback that will create HTML element for use in form, custom_value allows to retrieve and set your element value.

function autocomplete_element(value, options) {
  // creating input element
  var $ac = $('<input type="text"/>');
  // setting value to the one passed from jqGrid
  $ac.val(value);
  // creating autocomplete
  $ac.autocomplete({source: "autocomplete.php"});
  // returning element back to jqGrid
  return $ac;
}
 
function autocomplete_value(elem, op, value) {
  if (op == "set") {
    $(elem).val(value);
  }
  return $(elem).val();
}

Your resulting colModel should look like this:

  ...
  colModel: [
    {
      name          : 'field1',
      'index'       : 'field1',
      'edittype'    : 'custom',
      'editoptions' : {
        'custom_element' : autocomplete_element,
        'custom_value'   : autocomplete_value
      }
    }
  ]
  ...

Garry, thank you for pointing out problem with form and next/prev buttons, I wasn’t even aware of that problem! After digging through source code I found out how custom_value is intended to work.

If you find this snippet useful or have something to add/correct, please leave a comment. I need your feedback!