The jqAutocomplete class which uses jQuery UI autocomplete is a separate class
which can be used easy in any form.
The class is integrated in jqGrid for PHP and uses a method setAutocomplete.
This is a single line command wich tell on which field to apply autocomplete and
the SQL to obtain the data. There are a lot of option parameters where the method
can be configured.
In this particular example we use the autocomplete only in form editing.
When you lunch the edit form try to write some letter on ShipName field.
<?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 OrderID, OrderDate, CustomerID, Freight, ShipName FROM orders';
// 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"=>"Simple 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, "editoptions"=>array("editable"=>false)));
$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("ShipName",false,"SELECT DISTINCT ShipName FROM orders WHERE ShipName LIKE ? ORDER BY ShipName",null,true,false);
$grid->datearray = array('OrderDate');
// Enjoy
$grid->navigator = true;
$grid->setNavOptions('navigator', array("search"=>false, "excel"=>false, "add"=>false, "del"=>false));
$grid->renderGrid('#grid','#pager',true, null, null, true,true);