How to clear autocomplete window contents in add form after add in jqgrid

Question

jqGrid add forms contains autocomplete blocks using the code below. If a new row is added to jqgrid, the autocomplete fields are not cleared, the added row content is still displayed. Simple columns in a text field are cleared properly. How to clean autocomplete windows?

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

It seems to me that the problem exists because you are using a custom control ( edittype:"custom" , custom_element and custom_value . The <input> element that you create does not currently have an identifier . You should follow the jqGrid id transformation and create the element <input> having an 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 fixed the code above using options.id as id <input> to the value of options.id + "_x" . The problem is that options.id will be assigned to jqGrid later on the <div> element, which will be presented as newel . Autocomplete jQuery UI requires that the <input> element to which it will be connected has a unique identifier, so we can choose any other identifier as options.id so that there are no duplicate identifiers.