Datalist demo in form editing
<?php
ini_set("display_errors",1);
require_once '../../../php/demo/tabs.php';
?>
<!DOCTYPE html>
<html>
  <head>
    <title>jqGrid DataList Demo</title>
    <meta charset="utf-8" />
    <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/css">
        html, body {
        margin: 0;            /* Remove body margin/padding */
        padding: 0;
        overflow: hidden;    /* Remove scroll bars on browser window */
        font-size: 75%;
        }
        input.myinput {
    padding: .5em .3em !important;
    margin-bottom: 3px !important;
    font-size: inherit !important;
    }
        
    </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/src/jquery.jqGrid.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>
<script type="text/javascript">
jQuery(document).ready(function(){
    //  the array can be obtained via ajax
    var listarray = ["Chrome", "FireFox", "InternetExplorer"];
    var new_value;
    // custom element function, which creates the element
    function data_element (value, options) {
        // create all the needed elements
        var elem = $("<div id='myelem' style='float:left'>\
            <input tye='text' id='Browser' name='Browser' value='" +value+"' list = 'browsers' class='ui-widget-content ui-corner-all myinput'/>\
            <datalist id='browsers'></datalist></div>");
        // add option values from list data to datalist
        for(var i=0; i<listarray.length;i++) {
            $("#browsers", elem).append("<option>"+listarray[i]+"</option>");
        }
        new_value = false;
        return elem[0];
    }

    // custom value function to get and set value from the list
    // when operation is set we check if the new inserted item is in list and if nor
    // the element is added into the list array
    function data_value( elem, operation, value) {
        if(operation === 'get') {
            var ret = $('input',elem).val();
            if( $.inArray(ret, listarray) === -1 ) {
                listarray.push(ret);
                refreshlist();
                new_value = true;
            }
        return ret;
        } else if(operation === 'set') {
            $('input',elem).val(value);
        }
    }
    // function to refresh the list in html when new value is inserted
    function refreshlist() {
        var list = $("#browsers");
        list.empty();
        for(var i=0; i<listarray.length;i++) {
            var option = document.createElement('option');
            option.value = listarray[i];
            list[0].appendChild(option);
        }
    }

    jQuery("#grid").jqGrid({
    "colModel":[
        {"name":"UserId","index":"UserId","label":"ID","width":60, "key":true, editable : false},
        {"name":"Name","index":"Name", editable : true},
        {"name":"Mail","index":"Mail", editable : true},
        {"name":"Language","index":"Language", editable : true},
        {"name":"Browser","index":"Browser", editable : true,
            edittype : 'custom',
            editoptions : {
                custom_element : data_element,
                custom_value : data_value
            }
        }
    ],
    "url":"grid.php",
    "datatype":"json",
    "pager":"#pager",
    "editurl":"grid.php",
    "loadonce": true
    });
    // Set navigator .
    jQuery("#grid").jqGrid('navGrid','#pager',{add:true,edit:true,del:false},
        // edit
        {reloadAfterSubmit : false,
        serializeEditData : function( postdata) {
            // if needed modify the post so taht the new value should be added 
            // in the db
            postdata.new_value = new_value;
            new_value = false;
            return postdata;
        }
        },
        // add
        {reloadAfterSubmit : false,
        serializeEditData : function( postdata) {
            // for demo purpose we need to add a uniquie id 
            // when a new data is insertd into the local data
            postdata.UserId = $.jgrid.randId();
            postdata.new_value = new_value;
            new_value = false;
            return postdata;
        }
    });
});
</script>
  </head>
<body>

<table id="grid"></table>
<div id="pager"></div>
      <br/>
      <?php tabs(array("grid.php"));?>
   </body>
</html>
grid.php.
<?php
ini_set("display_errors",1);
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 UserId, Name, Mail, Language, Browser FROM UserData';
$grid->dataType = "json";
$grid->queryGrid();