Я основываюсь на этом примере
Автозаполнение и эффект возникают, но имеют url: ' http://trirand.com/blog/phpjqgrid/examples/jsonp/autocompletep.php?callback=?&acelem=ShipName '
В следующем коде я добавляю в "Клиент" функцию автозаполнения, колонку как в примере, и это работает. 
<!DOCTYPE html>
<html lang="en">
<head>
<!-- The jQuery library is a prerequisite for all jqSuite products -->
<script type="text/ecmascript" src="../../../js/jquery.min.js"></script>
<!-- This is the Javascript file of jqGrid -->
<script type="text/ecmascript" src="../../../js/trirand/jquery.jqGrid.min.js"></script>
<!-- This is the localization file of the grid controlling messages, labels, etc.
<!-- We support more than 40 localizations -->
<script type="text/ecmascript" src="../../../js/trirand/i18n/grid.locale-es.js"></script>
<!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom -->
<link rel="stylesheet" type="text/css" media="screen" href="../../../css/jquery-ui.css" />
<script type="text/ecmascript" src="../../../js/jquery-ui.min.js"></script>
<!-- The link to the CSS that the grid needs -->
<link rel="stylesheet" type="text/css" media="screen" href="../../../css/trirand/ui.jqgrid.css" />
<meta charset="utf-8" />
<title></title>
</head>
<body>
<style type="text/css">
/* set the size of the datepicker search control for Order Date*/
#ui-datepicker-div { font-size:11px; }
/* set the size of the autocomplete search control*/
.ui-menu-item {
font-size: 11px;
}
.ui-autocomplete {
font-size: 11px;
}
</style>
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
<script type="text/javascript">
var mydata = [
{ id: "1", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
{ id: "2", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
{ id: "3", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
{ id: "4", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
{ id: "5", invdate: "2007-10-05", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
{ id: "6", invdate: "2007-09-06", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
{ id: "7", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
{ id: "8", invdate: "2007-10-03", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
{ id: "9", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }
];
$(document).ready(function () {
$("#jqGrid").jqGrid({
datatype: "local",
data: mydata,
colModel: [
{ label: 'Inv No', name: 'id', width: 75, key:true },
{ label: 'Date', name: 'invdate', width: 90 },
{ label: 'Client', name: 'name', width: 100,
searchoptions: {
// dataInit is the client-side event that fires upon initializing the toolbar search field for a column
// use it to place a third party control to customize the toolbar
dataInit: function (element) {
$(element).autocomplete({
id: 'AutoComplete',
source: function(request, response){
this.xhr = $.ajax({
url: 'http://trirand.com/blog/phpjqgrid/examples/jsonp/autocompletep.php?callback=?&acelem=ShipName',
data: request,
dataType: "jsonp",
success: function( data ) {
response( data );
},
error: function(model, response, options) {
response([]);
}
});
},
autoFocus: true
});
},
sopt : ['cn']
}
},
{ label: 'Amount', name: 'amount', width: 80 },
{ label: 'Tax', name: 'tax', width: 80 },
{ label: 'Total', name: 'total', width: 80 },
{ label: 'Notes', name: 'note', width: 150}
],
height: 250,
width: 780,
caption: "Datos en tiempo real", //titulo del grid
rowNum: 20, //Registros por página
rownumbers: true, // Mostrar un número a la izquierda por registro
viewrecords: true, // Cantidad de registros
page: 1, //Página inicial de la paginación
pager: "#jqGridPager"
});
$("#jqGrid").jqGrid('bindKeys'); // Desplazar por teclas
$('#jqGrid').jqGrid('filterToolbar');
$('#jqGrid').jqGrid('navGrid',"#jqGridPager", {
search: false, // show search button on the toolbar
add: false,
edit: false,
del: false,
refresh: true
});
});
</script>
</body>
</html>
Если я использую массив (я хочу использовать локальный массив, без внешних данных):
dataInit: function (element) {
$(element).autocomplete({
id: 'AutoComplete',
source: mydata,
autoFocus: true
});
},
результат не работает =( (на основе этого)
Что мне нужно, чтобы работать как первое изображение, но с использованием массива (локальные данные) ?
