jqGrid 和 Firefox 自动完成冲突答案

【问题标题】：jqGrid and Firefox autocomplete conflictjqGrid 和 Firefox 自动完成冲突
【发布时间】：2011-04-08 09:57:00
【问题描述】：

我在下面的代码中构建了一个 jqGrid：

function radio(value, options, rowObject){
    var radio = '<input type="radio" value=' + value + ' name="radioid" />';
    return radio;
}

function reloadOnEnter(){
    jQuery(':input[name=field1]').keyup(function(e){
        if(e.keyCode == 13){
            var fieldValue = jQuery(':input[name=field1]').attr('value');
            jQuery(':input[name=field1]').attr('value', fieldValue);
            jQuery("#listTable").jqGrid().trigger("reloadGrid");
        }
    });
}

    jQuery(function(){
    jQuery("#listTable").jqGrid({
    url: '$content.getURI("myURI")' + '?userId=$userId&pageNo=0&locale=' + '$locale',
    datatype: 'json',
    mtype: 'POST',
    colNames:['column1', 'column2', 'column3', 'column4', 'column5'],
    colModel :[
        {name:'name', index:'field', width:'8%', search:false, align:'center', formatter: radio, editable:false, sortable: false, resizable:false},
        {name:'name1', index:'field1', width:'23%', sortable: false, resizable:false},
        {name:'name2', index:'field2', width:'23%', sortable: false, resizable:false},
        {name:'name3', index:'field3', width:'23%', sortable: false, resizable:false},
        {name:'name4', index:'field4', width:'23%', sortable: false, resizable:false}
        ],
    width:'768',
    height: 500,
    pager: '#pagerDiv',
    gridview: true,
    rowNum: $rowNr,
    rowTotal: 500,
    sortorder: 'desc',
    viewrecords: true,
    loadComplete: loadCompleteHandler,
    ignoreCase: true
    });
});

jQuery(function(){
    jQuery("#listTable").jqGrid('filterToolbar',{
                        stringResult: true,
                        searchOnEnter: false });
});

我开始输入“he”，自动完成窗口显示“hello”（因为我之前输入了 hello）。我选择“你好”并按回车键，仍然在 ajax 请求中提交了“他”。

我的 reloadOnEnter 函数由 loadCompleteHandler 调用。有趣的是，当我查询搜索字段 (field1) 时，值是选定的值，但请求中只发送了键入的值。我想发送选定的值。我怎样才能做到这一点？

编辑： loadCompleteHandler 看起来像这样：

function loadCompleteHandler(){
    reloadOnEnter();
    jQuery("#listTable").jqGrid('setGridHeight', Math.min(500,parseInt(jQuery(".ui-jqgrid-btable").css('height'))));
}

（我使用 Apache Velocity 作为模板引擎！这就是为什么我在 javascript 代码中有像 $variable 这样的变量！）

【问题讨论】：

您写过关于自动完成的文章。您在代码中的哪个位置将 field1 绑定到 jQuery UI 自动完成功能？
@Oleg：我可能用错了正确的词，当我说自动完成时，我指的是 Firefox 功能，当您单击它时会显示该字段的先前输入值列表（什么是这个名字？！？）。我没有使用 jQuery 自动完成功能！

标签： ajax jquery jqgrid

【解决方案1】：

对于您的主要问题：您应该使用jQuery.val 函数而不是jQuery.attr('value')。

您代码中的许多其他内容让我感到奇怪或不清楚。我不清楚你如何在loadCompleteHandler 中使用reloadOnEnter。如果包含相应的代码片段会很好。 url 的值似乎我也很奇怪。您还使用了filterToolbar 的searchOnEnter: false 选项，但在reloadOnEnter 中您等待“Enter”键。在if(e.keyCode == 13) 的主体内部，您会得到jQuery(':input[name=field1]').attr('value')，然后将相同的值设置回去。为什么？

也许您可以在问题的文本中多描述一下您想用代码归档什么？

【讨论】：

我已经用源代码更新了问题，所以你可以看到 loadCompleteHandler 方法。 URL 的值很奇怪，因为我使用 Velocity 引擎来解析它，因此我使用了特殊变量，例如“内容”变量。我没有设置 searchOnEnter，因为我希望它在没有“Enter”以及按下“Enter”时刷新网格。
jQuery.val 和 jQuery.attr 有什么区别？
@Atticus：您描述了您的主要问题如下：“我开始输入 'he' 并且自动完成窗口显示我 'hello'（因为我之前输入了 hello）。我选择了 'hello' 然后点击输入，仍然在ajax请求中提交'he'。”您发布的代码没有自动完成功能，因此主要部分未发布，无法使用该代码重现您的问题并为您提供帮助。您应该发布更完整的代码。此外，您当前的代码还有另一个重要的错误，它使绑定到keyup不是一次。每次按键时，该函数都会被调用多次。
感谢您指出这个错误。正如我所看到的，这是因为重新加载后重新加载了网格，绑定再次发生。我将不得不解决这个问题。关于自动完成，我用错了正确的词，因为我没有指代 jQuery 自动完成，而是指 Firefox 功能，当您单击该字段时，该功能会显示先前输入的字段值列表。（这个叫什么名字？！？）没有更多的代码可以发布。问题是由我（错误地）称为自动完成的这个 Firefox 功能引起的。