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 t

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.