JqG​​rid：表单字段中的自动完成

Question

我正在使用带有 MVC c# 的 jqgrid 免费版本（最新）。

我已经设置了表单域。当用户单击页脚按钮（添加）中的添加时，它会显示一个包含所有表单字段的模式弹出窗口。

我希望表单字段中的第一个文本框自动完成，即当他们开始在文本框中输入他们的员工编号时，我应该查询我的 mvc 控制器并获取数据，然后在匹配时进行预填充。一旦预填充，我还想更新表单上的另外 2 个标签，名字和姓氏。此外，该按钮应该被禁用，直到在员工文本框中获取正确的 ID。

不知道我该怎么做。我可以分享我使用过的示例网格。

谢谢

<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);              
});

---

更新：

如果还可以在文本框中使用 onkeyup、mouseover 等选项，以便我可以验证在文本框中输入的内容，然后还可以根据此值更新其他文本框

Answer 1

我通过使用 keyup 事件而不是使用自动完成来做到这一点。 相关代码如下：

     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
                        }
                    });

                }
            }
        ]
    }                   
    ]