Jqgrid 使用自动完成搜索，在字段“过滤器”上选择设置值

Question

我在搜索对话框中使用 JQgrid，其中一个字段是自动完成的，
它工作正常，但在服务器端，该字段没有价值。 你可以在这里看到：
request["filters"]= {"groupOp":"AND","rules":[{"field":"Name","op":"eq","data":""}]}

这是我的网格

  $("#myGrid").jqGrid({
    url: 'Handler.ashx',
    datatype: 'json',
    height: 250,
    direction: 'rtl',
    colNames: ['b', 'd', 'e', 'c', 'a'],
    colModel: [
                     { name: 'Semel', index: 'Semel', width: 80, sortable: true, formatter: semelFormatter },
                     { name: 'Name', width: 400, sortable: true ,searchoptions: {
               dataInit: function (elem) {
                     JqgridAuto(elem, "tyishuv", "yishuv", "shem", null);  }},
                     { name: 'Num', width: 50, sortable: true, align: "center" },
                     { name: 'date', width: 100, sortable: true },
                     { name: 'dateT', width: 100, sortable: true }

    ],
    rowNum: 200,
    postData: {       },
    rowList: [10, 20, 30, 200],
    pager: '#myGridPager',
    viewrecords: false,
    sortorder: 'asc'       
});
$("#myGrid").jqGrid('navGrid', '#myGridPager', { edit: false, add: false, del: false });

这里是自动完成功能：

var JqgridAuto = function (elem, tableName, nameCodeFilde, dspl, code, localValue, fildeFilter) {
var funcName = "FetchList";
if (code == undefined)
    code = "Semel";
if (localValue == undefined)
    localValue = '';
if (fildeFilter == undefined)
    fildeFilter = '';

var autocompleteSource = function (request, response) {
    $.ajax({
        url: "AutoComplete.asmx/" + funcName,
        dataType: "json",
        type: "POST",
        async: false,
        data: "{ 'Text':  '" + escape(request.term) + "','Code':'" + code + "','Dspl':'" + dspl + "','NumRecordes':'8','TableName':'" + tableName + "','fltr':'','Lfld':'" + localValue + "','Mfld':'" + fildeFilter + "','Desc':''}",
        contentType: "application/json; charset=utf-8",
        success: function (data) {
                if (!data.d.length) $(elem).val("");
            if (data.d.length == 1 && /^\d+$/.test(request.term)) {
                $(elem).val(data.d[0].Text);
                $("#" + nameCodeFilde).val(data.d[0].Semel);
                              }
            else {
                response($.map(data.d, function (item) {
                    return {
                        value: item.Semel,
                        label: item.Shem
                    };
                }
                ));
            }//else
        },
        error: function (res, status) {
            alert(res.status + " : " + res.statusText + ". Status: " + status);
        }
    }); //END AJAX
};
$(elem).autocomplete({
    source: autocompleteSource,
    position: { collision: "flip" },
    minLength: 1,
    select: function (event, ui) {
        $(elem).val(ui.item.label);
        $("#" + nameCodeFilde).val(ui.item.value);
    } 
}); //END AUOTOCOMPLETE
$('.ui-autocomplete').css('zIndex', 1000); // if autocomplete has misalignment so we are manually setting it 
if (elem.value != "0" && elem.value != '' && /^\d+$/.test(elem.value))
    $(elem).autocomplete('search', elem.value);

};

Answer 1

我想你的主要问题可以通过在自动完成设置服务器返回的值后直接在elem 上触发"change" 事件来解决。所以你应该添加这一行

$(elem).trigger("change");

在select 回调内部。代码示例见the answer。

另外我应该提一下，您用于自动完成的代码似乎太复杂且不完全正确。例如行

data: "{ 'Text':  '" + escape(request.term) + "','Code':'" + code + "','Dspl':'" +
    dspl + "','NumRecordes':'8','TableName':'" + tableName + "','fltr':'','Lfld':'" +
    localValue + "','Mfld':'" + fildeFilter + "','Desc':''}"

包含手动对象到 JSON 字符串的转换。此外，您使用 ' 而不是 " 字符串。这是不对的。只有旧的 Microsoft 实现的 ASMX Web 服务器才能容忍这种情况。我建议您改用 data 对象并调用 JSON.stringify：

data: JSON.stringify({
    Text: request.term,
    Code: code,
    Dspl: dspl,
    NumRecordes: "8",
    TableName: tableName,
    fltr: "",
    Lfld: localValue,
    Mfld: fildeFilter,
    Desc: ""
})

此外，您还应该在 error 回调中添加对 response 回调的调用。见下文

在提供自定义源回调来处理时很重要 请求期间的错误。您必须始终调用响应回调 即使遇到错误。

在 jQuery UI 自动完成的 the documentation 中。