jqgrid agents

attempt to get select2 or chosen widget working in add/edit form

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css">
<table id="grid"></table>
<div id="agent_grps_pager"></div>

JavaScript

$("#grid").jqGrid({
    datatype: "local",
    autowidth: true,
    height: 250,
    colNames: ['Agent Name', 'agent id', 'Group Name', 'start date', 'end date'],
    colModel: [{
        name: 'agent_name',
        index: 'agent_name',
        editable: true,
        editoptions: {
            'dataInit': function (elem) {
                $(elem).select2({
                    minimumInputLength: 3,
                    placeholder: 'Search',
                    ajax: {
                        url: "https://jsonplaceholder.typicode.com/posts",
                        dataType: 'jsonp',
                        quietMillis: 100,
                        data: function (term, page) {
                            return {
                                types: ["exercise"],
                                limit: -1,
                                term: term
                            };
                        },
                        results: function (data, page) {
                            return {
                                results: data.results.exercise
                            }
                        }
                    },
                    formatResult: function (exercise) {
                        return "<div class='select2-user-result'>" + exercise.term + "</div>";
                    },  // <-- formatResult
                    formatSelection: function (exercise) {
                        return exercise.term;
                    },  // <- formatSelection
                    initSelection: function (element, callback) {
                        var elementText = $(element).attr('data-init-text');
                        callback({
                            "term": elementText
                        });
                    } // <-- initSelection
                });
            }
        } // <-- edit options  
    }, {
        name: 'agent_id',
        index: 'agent_id',
        hidden: true
    }, {
        name: 'group_name',
       ...