JqGrid: Autocomplete in form fields

Question

I am using free version (latest) of jqgrid with MVC c#.

I have form fields setup. When the user clicks add in the footer button (add) it shows a modal popup with all the form fields.

I want my first textbox in the form field to autocomplete, ie when they start typing their empployee number in the textbox, I should query my mvc controller and fetch the data and then prefill if there is a match. Once that prefills I also want to update 2 more label on the form, firstname & lastname. Also the button should be disabled until the correct id is fetched in the employee textbox.

Not sure how should I go about this. I can share my sample grid that I have used.

Thanks

<script type="text/javascript">
$(function () {
    "use strict";
    var $grid = $("#list");             
    $grid.jqGrid({
        url: '@Url.Action("GetData", "Home")',
        datatype: "json",
        mtype: 'Get',
        colNames: ['Id', 'Name', 'Sex', 'Address'],
        loadonce: true,
        height: '100%',
        autowidth: true,
   colModel: [
            { name: 'empid', index: 'empid', editable: true,  editrules: { required: true}},
            { name: 'fname', index: 'fname', editable: true,  editrules: { required: true}}, //currently these are texbox, but I want this to be label which gets filled based on the empid
            { name: 'lname', index: 'lname', editable: true,  editrules: { required: true}},                
            { name: 'address', index: 'address', editable: true,  editrules: { required: true}}
 ],
        cmTemplate: { autoResizable: true, editable: true },
        autoResizing: { compact: true, resetWidthOrg: true },                
        iconSet: "fontAwesome",
        rowNum: 10,
        rowList: [5, 10, 20, "10000:All"],
        viewrecords: true,
        autoencode: true,
        sortable: true,              
        pager: true,
        rownumbers: true,
        sortname: "uid",
        sortorder: "desc",
        pagerRightWidth: 150,           
        inlineEditing: {
            keys: true
        },
        formEditing: {
             reloadGridOptions: { fromServer: true },
                reloadAfterSubmit: true,
                width: 310,
                closeOnEscape: true,
                closeAfterEdit: true,
                closeAfterAdd: true,
                closeAfterDelete: true,
                savekey: [true, 13]                    
        }
        caption: "MyData"
    }).jqGrid("navGrid")
    .editGridRow("new", properties);              
});

---

Updated:

If there is also option to use onkeyup, mouseover etc on the textbox so that I can validate whats entered in the textbox and then also update other textbox based on this value

Answer 1

I have done this by using keyup event instead of using autocomplete. Relevant code as below:

     colModel: [
      {
    name: 'empid', index: 'empid', editable: true, , editrules: { required: true },
    editoptions:
    {
        dataEvents: [
            {
                type: 'keyup',
                fn: function (e) {

                    $.ajax({
                        url: //call to my method in my mvc controller,
                        data: "empid=" + $(this).val(),
                        type: "GET",
                        success: function (data) {
                            //validate and populate other fields here
                            }
                            else {

                            }
                        },
                        error: function (passParams) {
                            // code here
                        }
                    });

                }
            }
        ]
    }                   
    ]