JQGery + jQueryUI Autocomplete + combobox automatically opens in focus

Question

I am sure that I have missed something very simple in this matter. After I hit my head on the table (literally) for a couple of days, I obey the grace of the stack:

I am using jQuery UI Autocomplete as a combobox in my jQGrid (I know! I already looked for a solution elsewhere to no avail!). I would like the dropdown to open when I access the edit cell through the onSelectRow event in jqGrid. Basically, I want to do exactly what is being discussed here:

Open jQuery UI ComboBox in focus

and the demo is here:

http://jsfiddle.net/gEuTV/

The only difference is that I need it in jqGrid. I tried the code below which I (by mistake) could cause the combobox to display when the line is focused, but the combobox is not displayed in line focus in the onSelect event. I have a suspicion that I just put the following code in the wrong place, but I tried it everywhere I can think of:

$("#"+id+"_usr_validation","#list2").bind("focus", function () { this.value = ''; $(this).autocomplete("search", ''); 

Here is my full 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 must change the 'User Validation, 'User Validation' to 'User Validation' and remove the commas in different places of your code (for example, from editurl: '/php_includes/jqGridCrud.php',} and close, which are syntax errors in JavaScript, but are ignored in many , but not in all browsers).

UPDATED . Another problem is that the focus on the edit box will be set until oneditfunc is called, so the "focus" event cannot be fired. As a workaround, you can trigger the "focus" event immediately after .bind("focus", ...

See the modified demo here .