In this advanced example we show one very useful feature of the autocomplete
method. It is possible to search on one field, but to set the selected value on
on different field.
For this purpose it is only needed to set the target field.
In this particular example - open the edit form and then try to search on
CompanyName field. After the field is selected and the cursor is moved
you will see that the CustomerID changes. If there is no selection the
CustomerId field goes empty.
<?php 
require_once '../../../../php/demo/tabs.php';
?>
<!DOCTYPE html>
<html>
  <head>
    <title>jqGrid PHP Demo</title>
    <link rel="stylesheet" type="text/css" media="screen" href="../../../../css/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="../../../../css/trirand/ui.jqgrid.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="../../../../css/ui.multiselect.css" />
    <style type="text">
        html, body {
        margin: 0;            /* Remove body margin/padding */
        padding: 0;
        overflow: hidden;    /* Remove scroll bars on browser window */
        font-size: 75%;
        }
        #tags {z-index: 900}
    </style>
    <script src="../../../../js/jquery.min.js" type="text/javascript"></script>
    <script src="../../../../js/trirand/i18n/grid.locale-en.js" type="text/javascript"></script>
         <script src="../../../../js/trirand/jquery.jqGrid.min.js" type="text/javascript"></script> <script type="text/javascript">         
    $.jgrid.no_legacy_api = true;
    $.jgrid.useJSON = true;
    $.jgrid.defaults.width = "700";
    </script>
     
    <script src="../../../../js/jquery-ui.min.js" type="text/javascript"></script>
    </head>
  <body>
      <div>
        <?php include ("grid.php");?>          
      </div>
      <br/>
      <?php tabs(array("grid.php"));?>
   </body>
</html>
grid.php.
<?php
require_once '../../jq-config.php';
// include the jqGrid Class
require_once ABSPATH."php/PHPSuito/jqGrid.php";
// include the driver class
require_once ABSPATH."php/PHPSuito/DBdrivers/jqGridPdo.php";

// Connection to the server
$conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD);
// Tell the db that we use utf-8
$conn->query("SET NAMES utf8");
// Create the jqGrid instance
$grid = new jqGridRender($conn);
// Write the SQL Query
$grid->SelectCommand 'SELECT a.OrderID, a.OrderDate, a.CustomerID, b.CompanyName, a.Freight, a.ShipName FROM orders a, customers b WHERE a.CustomerID=b.CustomerId';
// set the ouput format to json
$grid->dataType 'json';
$grid->table ="orders";
$grid->setPrimaryKeyId("OrderID");
// Let the grid create the model
$grid->setColModel();
// Set the url from where we obtain the data
$grid->setUrl('grid.php');
// Set grid caption using the option caption
$grid->setGridOptions(array(
    
"caption"=>"Advanced Autocomplete",
    
"rowNum"=>10,
    
"sortname"=>"OrderID",
    
"hoverrows"=>true,
    
"rowList"=>array(10,20,50),
    ));
// Change some property of the field(s)
$grid->setColProperty("OrderID", array("label"=>"ID""width"=>60));
$grid->setColProperty("CustomerID", array("editoptions"=>array("readonly"=>"readonly")));
$grid->setColProperty("OrderDate", array(
    
"formatter"=>"date",
    
"formatoptions"=>array("srcformat"=>"Y-m-d H:i:s","newformat"=>"m/d/Y")
    )
);
// set autocomplete. Serch for name and ID, but select a ID
// set it only for editing and not on serch
$grid->setAutocomplete("CompanyName","#CustomerID","SELECT CompanyName, CompanyName,CustomerID FROM customers WHERE CompanyName LIKE ? ORDER BY CompanyName",null,true,false);
$grid->datearray = array('OrderDate');
// Enjoy
$grid->navigator true;
$grid->setNavOptions('navigator', array("search"=>false"excel"=>false));
$grid->setNavOptions('edit', array("height"=>'auto',"dataheight"=>'auto'));
$grid->renderGrid('#grid','#pager',truenullnulltrue,true);