编辑单元格中的 Ag Grid 自动完成答案

【问题标题】：Ag Grid Autocomplete in edit cell编辑单元格中的 Ag Grid 自动完成
【发布时间】：2018-10-02 20:05:18
【问题描述】：

我需要在桌子上的 ag 网格单元中实现自动完成功能。是 ag 提供了任何选项。我只是看到带有选项的选择。但我需要编辑单元格，在开始输入值时，必须根据字符显示在下方。

【问题讨论】：

标签： ag-grid

【解决方案1】：

和你一样，我找不到这个功能。我决定为此编写一个 Angular 组件并分享它。

它可以通过开始输入进行过滤，也可以通过鼠标单击选择。还包括键盘向上和向下箭头导航。

它是一个简单的组件，应该很容易根据自己的喜好进行编辑，或者如果您不使用 Angular，则可以在 JS 或不同的框架中获取代码并实现。 ~~我遇到了一些令人遗憾的外观问题（主要在网格的最后一列），希望能尽快解决，然后更新存储库。~~

https://github.com/superman-lopez/ag-grid-auto-complete

编辑：

自从我的原始帖子以来，一个新项目已经开始，这不仅限于 Angular 项目：

https://github.com/avallete/ag-grid-autocomplete-editor

【讨论】：

如何设置z-index？
不用自己尝试：相信你可以在组件文件中改变宿主的样式。

【解决方案2】：

您可以使用 jQuery 自动完成功能作为单元格编辑器的一部分。您必须在自定义编辑器的 afterGuiAttached 函数中执行此操作，以便在创建输入之前它不会运行。

// function to act as a class
function YourCustomEditor () {}

// gets called once before the renderer is used
YourCustomEditor.prototype.init = function(params) {
            this.eInput = document.createElement('input');
            this.eInput.setAttribute('class', 'inputClass');
            this.eInput.setAttribute('type', 'text');
        }
};   

YourCustomEditor.prototype.afterGuiAttached = function() {
        $('.inputClass').autocomplete({
            source: function(request, response) {
                // Do your autocomplete filtering here
            },
            datatype: 'json',
            select: function(event, ui) {
                // Do Stuff on select 
            }
        });
  this.eInput.focus();
};

【讨论】：