具有自动完成功能的jQuery网格

我正在使用jQuery和jqueryui构建一个webapp。我陷入僵局。我需要的是一个jQuery网格，它具有可编辑字段，并且在其中一个可编辑单元格上以某种方式合并了一个自动完成字段，而我似乎找不到任何实现这一点的网格产品

我一直在看StickGrid和jgGrid

---

我特别喜欢jqGrid，因为它已经准备好了。有人知道是否有人能够成功地将自动完成集成到这些网格中的一个，或者任何其他jquery网格上吗？

我没有实现自动完成，但我与jqGrid合作过，它对javascript事件的支持非常棒

例如： 如果您在其中一个单元格中放置了一个id，并且希望在其他单元格中自动填充信息，您可以使用 afterEditCell，其中您指定一个自定义函数，该函数将接收rowid、cellname、value、iRow、iCol并检查iRow是否与您的id是同一行，获取该值并基于该值填充其他单元格。-基本自动完成

或者可以使用beforeEditCell事件并创建您自己的函数，该函数将接收rowid、cellname、value、iRow、iCol，并将返回的结果放置在单元格中

退房活动部分

---

祝你好运

我认为你想要的应该很容易实现。我给你做了一个快速复制粘贴/窃取页面

如果单击“日期”列，将获得日历选择器

如果单击“客户端”列并删除内容，您将看到一个自动完成器（css不适合QuickPaste），其中列出了美国城市（我知道城市不是客户端名称，只是一个演示）

代码取自单元格编辑演示页+演示页

（将

/edit

附加到url以查看代码）

当然，演示的边缘有点粗糙

• css问题
• 快速插入afterSaveCell，以使jQgrid插入自动完成器中的选定值。如果用户使用箭头键+使用鼠标输入键，则无需插入

我想，在将autocomplete和jqGrid干净地集成在一起时，afterSaveCell黑客可以被移除

基本上可以归结为

jQuery("#celltbl").jqGrid({
    ...
    {name:'name', width:100, editable:true}, //e.g.
    ...
    afterEditCell: function (id,name,val,iRow,iCol) {
        if(name=='name') {
            //cities here is local json object
            jQuery("#"+iRow+"_name","#celltbl").autocomplete(cities);
        }
    },
    afterSaveCell : function(rowid,name,val,iRow,iCol) {
        if(name == 'name') {
            jQuery("#celltbl").jqGrid('setRowData',rowid,{name:jQuery(".ac_over").text()});
            jQuery(".ac_results").remove();
        }
    }
    ...

---

这很有趣，如果我最终使用jqGrid，它会派上用场，但我想我没有完全弄清楚。我所寻找的更像是从可编辑单元格中弹出的一个下拉列表，其中填充的项目以当时键入的文本开头，用户可以单击下拉列表中的一个项目，因此该字段将自动完成。还没有时间看代码，但是类似的东西可以被改编成jqGrid吗？我认为这是可行的，你需要在cell对象上附加一个jquery onkeyup事件，它在每次按键时调用一个webservice。挑战是如何从beforeEditCell获取该对象，因为它只发送rowid、cellname、value、iRow、iCol。。。需要一些聪明的jquery。我其实在寻找类似的东西。