微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

我确定我在这个问题上遗漏了一些非常简单的东西.在将我的头撞到桌子上(字面意思)几天之后,我将自己置于堆栈的怜悯之下:

我在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',{name:'usr_validation',index:'usr_validation',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',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','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",function () {
                    this.value = '';
                    $(this).autocomplete("search",'');
              });

            }
    });

解决方法

您应该将“用户验证”更改为“用户验证”,并在代码的不同位置删除尾随逗号(例如来自editurl:’/ PHP_includes/jqgridCrud.PHP’,}并关闭JavaScript中的语法错误,但在许多情况下忽略,但不是所有的网络浏览器).

更新:还有一个问题是,在调用oneditfunc之前将设置对编辑字段的关注,因此无法触发“焦点”事件.作为一种解决方法,您可以直接在.bind(“焦点”,……之后)触发“焦点”事件.

查看修改后的演示here.

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐