how to clear autocomplete box contents in add form after adding in jqgrid

Question

jqGrid add forms contains autocomplete boxes using code below. If new row is added to jqgrid, autocomplete fields are not cleared, the still show added row content. Simple textbox columns are cleared properly. How to clear autocomplete boxes also ?

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

Talky

Answer 1

It seems to me that the problem exist because you use custom edit control (edittype:"custom", custom_element and custom_value. The <input> element which you create has currently no id. You should follow jqGrid id conversion and create the <input> element having id equal to 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;
}

UPDATED: I corrected the code above from the usage of options.id as the id of the <input> to the value options.id + "_x". The problem that the options.id will be assigned by jqGrid later to the <div> element which will be represented as newel. jQuery UI Autocomplete required that the <input> element, to which it will be connected, has an unique id so we can choose any other id as options.id to have no id duplicates.

Pozzy

_x fix still will not create input element if edit action button is clicked as described in #7049825 – Talky