jquery-ui - jQGrid + jQueryUI 自动完成 + 组合框在焦点上自动打开

Question

我确信我遗漏了一些非常简单的东西。在用头撞 table (字面意思)几天后，我屈服于堆栈的摆布:

我在 jQGrid 中使用 jQuery UI Autocomplete 作为组合框(我知道!我已经在其他地方寻找解决方案但无济于事!)。我希望当我通过 jqGrid 中的 onSelectRow 事件访问单元格进行编辑时打开下拉菜单。基本上，我想做的正是这里讨论的事情:

Open jQuery UI ComboBox on focus

并在此处进行演示:

http://jsfiddle.net/gEuTV/

唯一的区别是我在 jqGrid 中需要它。我已经尝试过下面的代码，我(错误地)通过该代码会在行获得焦点时触发组合框出现，但组合框不会出现在 onSelect 事件中行的焦点上。我偷偷怀疑我只是将以下代码放在了错误的位置，但我已经在我能想到的所有地方都尝试过:

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

这是我的完整代码，包括网格:

$(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

您应该将 'User Validation, 更改为 'User Validation' 并删除代码中不同位置的尾随逗号(例如 editurl: '/php_includes/jqGridCrud.php',} 和 close 是 JavaScript 中的语法错误，但在许多(但不是所有)网络浏览器中被忽略)。

更新:还有一个问题是编辑字段的焦点将设置在之前 oneditfunc会被调用，所以“focus”事件无法被触发。作为解决方法，您可以在 .bind("focus", ....

之后直接触发“focus”事件。

查看修改后的演示 here .