Как очистить содержимое поля автозаполнения в форме добавления после добавления в jqgrid

Question

jqGrid add формы содержат поля автозаполнения, используя код ниже. Если в jqgrid добавлена ​​новая строка, поля автозаполнения не очищаются, но все равно отображается добавленное содержимое строки. Простые столбцы текстового поля очищаются правильно. Как очистить поля автозаполнения также?

var grid = $("#grid");
grid.jqGrid({
    url: 'GetData',
    datatype: "json",
    mtype: 'POST',
    scroll: 1,
    multiselect: true,
    multiboxonly: true,
    scrollingRows : true,
    autoencode: true,
    prmNames:  {id:"_rowid", oper: "_oper" }, 
    colModel: [{"label":"Artikkel","name":"Toode","edittype":"custom","editoptions":{"custom_element":function(value, options) {
return combobox_element(value, options,'54','Toode','RidG','ArtikkelDokumendiReal')}
,"custom_value":combobox_value
},"editable":true},
],
    gridview: true,
    toppager: true,
    editurl: 'Edit',
    rownumbers: true,
});

grid.navGrid("#grid_toppager", { refreshstate: 'current' },
    {},
    { url: 'AddDetail',
    editData: { _dokdata: FormData },
    savekey: [true, 13],
    recreateForm: true,
    closeOnEscape: true,
    // todo: this does not clear autocomplete boxes:
    clearAfterAdd: true,
    addedrow: 'last',
    reloadAfterSubmit: false,
    afterSubmit: function (response) { return [true, '', response.responseText] },
});

function combobox_element(value, options, width, colName, entity, andmetp) {
    var elemStr;
    if (options.id === options.name)
    // form 
        elemStr = '<div>' +
           '<input class="FormElement ui-widget-content ui-corner-all" style="vertical-align:top" size="' +
                options.size + '" value="' + value + '"/>' +
           '<button ' +
           ' style="height:21px;width:21px;" tabindex="-1" /></div>';
    else
        elemStr = '<div>' +
           '<input class="FormElement ui-widget-content " style="height:17px;vertical-align:top;width:' +
                width + 'px" value="' + value + '"/>' +
           '<button ' +
           ' style="height:21px;width:21px;" tabindex="-1" /></div>';
    var newel = $(elemStr)[0];
    setTimeout(function () {
        input_autocomplete(newel, colName, entity, andmetp, validate);
    }, 50);
    return newel;
}

function input_autocomplete(newel, colName, entity, andmetp, fvalidate) {
    var input = $("input", newel);
    input.autocomplete({
        source: 'Grid/GetLookupList'
    });
}

function combobox_value(elem, operation, value) {
    if (operation === 'get') {
        return $(elem).find("input").val();
    } else if (operation === 'set') {
        $('input', elem).val(value);
    }
}

Answer 1

Мне кажется, что проблема существует, потому что вы используете пользовательский элемент управления для редактирования (edittype:"custom", custom_element и custom_value. Элемент <input>, который вы создаете , в настоящее время не имеет id . Необходимо выполнить преобразование идентификатора jqGrid и создать элемент <input>, имеющий id, равный options.id:

function combobox_element(value, options, width, colName, entity, andmetp) {
    var elemStr, newel;
    if (options.id === options.name) {
        // form 
        elemStr = '<div>' +
           '<input class="FormElement ui-widget-content ui-corner-all"'+
           ' style="vertical-align:top"' +
           ' id="' + options.id + '"' +
           ' size="' + options.size + '" value="' + value + '"/>' +
           '<button style="height:21px;width:21px;" tabindex="-1" /></div>';
    } else {
        elemStr = '<div>' +
           '<input class="FormElement ui-widget-content "' +
           ' style="height:17px;vertical-align:top;width:' +
           width + 'px"'+
           ' id="' + options.id + '_x"' +
           ' value="' + value + '"/>' +
           '<button ' +
           ' style="height:21px;width:21px;" tabindex="-1" /></div>';
    }
    newel = $(elemStr)[0];
    setTimeout(function () {
        input_autocomplete(newel, colName, entity, andmetp, validate);
    }, 50);
    return newel;
}

ОБНОВЛЕНО : я исправил приведенный выше код, используя options.id в качестве id для <input> до значения options.id + "_x". Проблема в том, что options.id будет назначен jqGrid позже элементу <div>, который будет представлен как newel. Для jQuery UI Autocomplete требуется, чтобы элемент <input>, к которому он будет подключен, имел уникальный идентификатор, поэтому мы можем выбрать любой другой идентификатор как options.id, чтобы не иметь дубликатов идентификаторов.