jqgrid inline editing autocomplete dropdown

Question

Found answers in Oleg post but unable to solve in my case. I have a jqGrid with inline editing. That works fine. One column 'SupervisorUserID' has a dropdown box with list of entries which retrieved from a database query already.

As the entries are too much, I want to have an input field which will autocomplete/search the dropdown list.

Please help me to achieve this. Thanks.

My code,

 public JsonResult PersonnelManagementGrid(string sidx, string sord, int page, int rows)
 {
    objPersonnelManagementViewModel = new PersonnelManagementViewModel();
    objPersonnelManagementViewModel.PersonnelManagementModelList = (List<PersonnelManagementModel>) Session["PersonnelList"];
    var results = objPersonnelManagementViewModel.PersonnelManagementModelList.Select(x => new
    {
        x.UserID,
        x.Name,
        x.InActive,
        x.SupervisorUserID,
    });

    int pageIndex = Convert.ToInt16(page) - 1;
    int pageSize = rows;
    int totalRecords = results.Count();
    var totalPages = (int)Math.Ceiling((float)totalRecords / (float)rows);
    if (sord.ToUpper() == "DESC")
    { results = results.OrderByDescending(e => e.Name); }
    else { results = results.OrderBy(e => e.Name); }
    results = results.Skip(pageIndex * pageSize).Take(pageSize);

    var sbLocations = new System.Text.StringBuilder();
    Dictionary<string, string> personnelList = new Dictionary<string, string>();
    personnelList = objPersonnelManagementViewModel.PersonnelManagementModelList.ToDictionary(x => x.UserID, x => x.Name);
    //personnelList.Add("1","one");
    //personnelList.Add("2", "two");
    //personnelList.Add("3", "three");
    foreach (var sortedLocation in personnelList)
    {
        sbLocations.Append(sortedLocation.Key);
        sbLocations.Append(':');
        sbLocations.Append(sortedLocation.Value);
        sbLocations.Append(';');
    }
    if (sbLocations.Length > 0)
        sbLocations.Length -= 1; // remove last ';'

    var jsonResults = new
    {
        colModelOptions = new
        {
            SupervisorUserID = new
            {
                formatter = "select",
                edittype = "select",
                editoptions = new
                {
                    value = sbLocations.ToString()
                }
            }
        },
        total = totalPages,
        page,
        records = totalRecords,
        rows= results,
    };
    return Json(jsonResults, JsonRequestBehavior.AllowGet);
}

Jquery:

$(function () {
$("#PersonnelManagementGrid").jqGrid({
    url: '/PersonnelManagement/PersonnelManagementGrid',
    datatype: "json",
    contentType: "application/json; charset-utf-8",
    mtype: 'Get',
    colNames: ['UserID', 'Name', 'Role', 'Active?', 'Supervisor', 'Change Active', 'Try Delete'],
    colModel: [
        { key: true, name: 'UserID', index: 'UserID', hidden: true },
        {
            name: 'Name', index: 'Name', editable: false, width: "460", sortable: true,
        },
        {
            name: 'Role', index: 'Role', editable: false, width: "200", sortable: true,
        },
        {
            name: 'InActive', index: 'InActive', editable: false, width: "200", sortable: true,                
        },
        {
            name: 'SupervisorUserID', index: 'SupervisorUserID', editable: true, formatter: 'select', width: "200", sortable: true,
            edittype: 'select', width: "200", align: "center",
        },
        {
            name: "Change Active", sortable: false, width: "200", align: "center",
            formatter: function (cellvalue, options, rowObj) {
                var cBtn = '<input type="button" class="button" value="Change" onclick= "changeActive(' + "'" + rowObj.id + "','" + "values" + "','" + "values" + '\')"/>'
                return cBtn;
            }
        },
        {
             name: "Try Delete", sortable: false, width: "200", align: "center",
             formatter: function (cellvalue, options, rowObj) {
                 var cBtn = '<input type="button" value="Delete" onclick= "tryDelete(' + "'" + rowObj.id + "','" + "values" + "','" + "values" + '\')"/>'
                 return cBtn;
             }
        }

    ],
    beforeProcessing: function (response) {
        var $self = $(this),
        options = response.colModelOptions, p;
        if (options != null) {
            for (p in options) {
                if (options.hasOwnProperty(p)) {
                    $self.jqGrid("setColProp", p, options[p]);
                }
            }

        }
    },
    pager: jQuery('#pager'),
    rowNum: 15,
    rowList: [5, 10, 15],
    height: '100%',
    width: '1328',
    viewrecords: true,
    caption: 'Personnel Management',
    //loadonce: true,
    emptyrecords: 'No records to display',
    scrollerbar: false,
    jsonReader: {
        root: "rows",
        page: "pagenumbers",
        total: "totalnumbers",
        records: "records",
        repeatitems: false,
        id: "0"
    },
    hidegrid: false,
    multiselect: false,
    onSelectRow: function (id) {
        rowSelect(id);
    },
}).navGrid('#pager', { edit: false, add: false, del: false, search: false, cancel: false, reload: false, refresh: false });    
});