jQGrid + jQueryUI Autocomplete + combobox automatically open on focus - jquery-ui

Question

I'm sure I'm missing something very simple on this one. After banging my head against the desk (literally) for a couple of days now, I submit myself to the mercy of the stack:
I'm using jQuery UI Autocomplete as a combobox in my jQGrid (I know! I've already looked for the solution elsewhere to no avail!). I would like the dropdown to open when I access the cell for editing through the onSelectRow event in jqGrid. Basically, I want to do exactly what is discussed here:
Open jQuery UI ComboBox on focus
and demo'd here:
http://jsfiddle.net/gEuTV/
The only difference is that I need it in jqGrid. I've tried the code below which I (mistakenly) through would trigger the combobox to appear when the row is focused, but the combobox doesn't appear on focus of the row in the onSelect event. I have a sneaking suspicion that I'm just putting the following code in the wrong spot, but I've tried it everywhere I can think of:
$("#"+id+"_usr_validation","#list2").bind("focus", function () {
this.value = '';
$(this).autocomplete("search", '');
Here's my complete code including the grid:
$(function(){
var lastsel;
$("#list2").jqGrid({
url: 'php_includes/uploadgrid.php',
datatype: "json",
mtype: 'GET',
colNames:[
'User Value',
'Translated Value',
'User Validation,
],
colModel:[
{name:'usr_value',index:'usr_value', sortable:'true', width:60, align:"center", editable:false},
{name:'translated_value',index:'translated_value', sortable:'true', width:60, align:"center", editable:false},
{name:'usr_validation',index:'usr_validation', sortable:'true', width:60, align:"center", editable:true}
],
pager: '#pager2',
rowNum: 1000,
scroll: true,
gridview: true,
viewrecords: false,
height: 'auto',
hidegrid: false,
autowidth: true,
pgbuttons: false,
pginput: false,
forceFit: true,
emptyrecords: "No record was loaded",
onSelectRow: function(id){
if(id && id==lastsel){
$("#list2").jqGrid('editRow',id,true,autocomp,'','','',selectNone);
} else {
if(id && id!==lastsel){
$("#list2").jqGrid('saveRow',lastsel);
$("#list2").jqGrid('editRow',id,true,autocomp,'','','',selectNone);
lastsel=id;
}
}
},
editurl: '/php_includes/jqGridCrud.php',
});
jQuery("#list2").jqGrid('navGrid',"#pager2",{edit:false, search:false, del:false, add:false})
function selectNone(){
$("#list2").jqGrid('resetSelection');
}
//this function de-selects all previously accessed rows
function autocomp(id) {
var term2 = $("#list2").jqGrid('getCell',id,'usr_value');
$("#"+id+"_usr_validation","#list2")
.autocomplete({
source: function(request, response) {
$.ajax({
url: "/php_includes/Autocomplete.php",
dataType: "json",
data: {
term : request.term,
term2 : term2,
},
success: function(data) {
response(data);
}
});
},
minLength: 0,
select: function(event, ui) {
$("#list2").val(ui.item.id);
},
});
$("#"+id+"_usr_validation","#list2").bind("focus", function () {
this.value = '';
$(this).autocomplete("search", '');
});
}
});

Answer 1

You should change 'User Validation, to 'User Validation' and remove trailing commas in different places of your code (like from editurl: '/php_includes/jqGridCrud.php',} and close which are syntax errors in JavaScript, but ignored in many, but not all web browsers).
UPDATED: One more problem is that the focus on the editing field will be set before oneditfunc will be called, so the "focus" event can not be triggered. As a workaround you can trigger "focus" event directly after the .bind("focus", ....
See your modified demo here.