In this scenario we will demonstarte how to attach a autocomplete when we are in editng mode.
The whole script will be written in PHP, but it is possible that part of the javascript can be written in the index file.

In order to use this functionality we will use a jQuery UI autocomplete widget. The jQuery UI library can be downloaded form here:

http://jqueryui.com/download

When you download the library, please be a sure that you have marked the autocomplete checkbox.

The autocomplete widget is available from jQuery UI version 1.8 and up

Please refer to the coments at end of this page.

After the library is downloaded you should include it in the index file. This can look like this

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>jqGrid PHP Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui-1.8.1.custom.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="themes/ui.multiselect.css" />
    <style type="text/css">
        html, body {
        margin: 0;         /* Remove body margin/padding */
        padding: 0;
        overflow: hidden;   /* Remove scroll bars on browser window */
        font-size: 75%;
        }
    </style>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
   <script type="text/javascript">
   $.jgrid.no_legacy_api = true;
   $.jgrid.useJSON = true;
   </script>
    <script src="js/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
    <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
  </head>
  <body>
      <div>
          <?php include ("grid.php");?>
      </div>
   </body>
</html>

Lets begin with our script.
We will first use our example and we will attach the autocomplete to the Customer name. In autocomplete we will display the name, but when we select a item we will post the id of the customer.

<?php
// include the database connection settings/configuration
require_once 'jq-config.php';
// include the jqGrid Class
require_once "php/jqGrid.php";
// include the driver class
require_once "php/jqGridPdo.php";
// connection to the server
$conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD);
// instruct the database that we use utf-8 encoding
$conn->query("SET NAMES utf8");

$grid = new jqGridRender($conn);
// set the SQL select query
$grid->SelectCommand = 'SELECT a.OrderID, a.OrderDate, a.CustomerID, b.CompanyName, a.ShipName, a.Freight FROM orders a, customers b WHERE a.CustomerID = b.CustomerID';
// Set output format to json
$grid->dataType = 'json';
// Let the grid automatically create the model based on the SQL query
$grid->setColModel();
// Set the url from where we obtain the data
$grid->setUrl('grid.php');
$grid->table = 'orders';

//lets hide the customerId 
$grid->setColProperty('CustomerID',array('hidden'=>true));

// autocomplete javascript code
$company = <<CUSTOM
function (elem) {
setTimeout(function() {
        $(elem).autocomplete({
             source: 'company.php',
             select: function(event, ui) {
                $("#CustomerID").val(ui.item.id);
             }
        });
        jQuery('.ui-autocomplete').css({'font-size':'75%'});
},100);
}
CUSTOM;

// attaching the autocomplete function
$grid->setColProperty('CompanyName',array("editoptions"=>array("dataInit"=>"js:".$company)));


// Set some grid options
$grid->setGridOptions(array(
    "rowNum"=>10,
    "rowList"=>array(10,20,30),
    "sortname"=>"OrderID",
    "footerrow"=>true,
    "userDataOnFooter"=>true
));


$grid->navigator=true;

$grid->renderGrid('#grid','#pager',true, null, null, true,true);
$conn = null;


The PHP script for the company.php used in autocomplete has the following code:

<?php
// include the database connection settings/configuration
require_once 'jq-config.php';
// include the jqGrid Class
require_once "php/jqGrid.php";
// include the driver class
require_once "php/jqGridPdo.php";
// connection to the server
$conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD);
// instruct the database that we use utf-8 encoding
$conn->query("SET NAMES utf8");
$term = jqGridUtils::GetParam("term");

$SQL = "SELECT CustomerID as id, CompanyName as name, CompanyName AS value FROM customers WHERE CompanyName LIKE ? or CustomerID LIKE ?"; 

$grid = new jqGridRender($conn);
$ret = $grid->SelectLimit($SQL , 10, 0, array($term."%",$term."%"));
echo json_encode($ret);

?>


Now what we do.
1. We have changed the sql query in Select Command so that we have joined the CompanyName to be displayed into the grid - see Select Command
2. We have included in the SelectCommand the CustomerID.
3. We set this field to be hidden so that it does not appear into the grid, but it is hidden into the editing form - see setColProperty for CustomerID
4. We have attached a dataInit event for the field CompanyName - see setColProperty for CompanyName
5. The dataInit event (javascript) just call the jQuery autocomplete widget - see $company variable. When the value is selected we change the CustomerID which is transported from company.php request.
6. The autocomplete obtain the data via ajax request privided from company.php file. To this request autocomplete widget send a term variable with the data typed from the user.
7. In company.php file we use again the power of jqGrid method selectLimit. This method return the obtained data in a way that is acceptable for the plugin.