制表符自动完成自定义编辑器和 css。无法在单元格外显示编辑器答案

【问题标题】：Tabulator autocomplete custom editor and css. Cant display editor outside of a cell制表符自动完成自定义编辑器和 css。无法在单元格外显示编辑器
【发布时间】：2020-12-09 09:37:51
【问题描述】：

我使用 tabulator.js 库。我的目标 - 使用从 API 返回的值创建自动完成编辑器。我尝试按照custom editiors 部分的文档中的说明实现此功能。

我的 JS 代码：

function AutocompleteEditor(cell, onRendered, success, cancel, editorParams) {

    var editor = document.createElement("input");
    editor.setAttribute("type", "text");
    editor.setAttribute("autocomplete", "off");
    
    editor.style.width = "100%";
    // editor.style.height = "100%";
    editor.style.boxSizing = "border-box";

    if (cell.getValue()) {

        editor.value = cell.getValue();
    }

    $(editor).autoComplete({
        minLength: 1,
        resolverSettings: {
            url: apiBaseUrl + 'ItemMatching/ItemCode',
        },
        formatResult: function (item) {
            return {
                value: item.vendorCode,
                text: item.vendorCode + " - " + item.vendorName,
            };
        },
    });

    $(editor).on('autocomplete.select', function (event, item) {

        if (item) {

            selectedManufacturer = item;
            $(editor).value(item.vendorName);
        }
    });

    onRendered(function () {

        console.log($(editor));
        editor.focus();
        editor.style.css = "100%";
    });

    function successFunc() {

        success(selectedManufacturer.vendorCode);
    }

    editor.addEventListener("change", successFunc);
    editor.addEventListener("blur", successFunc);

    return editor;
}

当自动完成部分被单元格“隐藏”时，我得到了行为。如果我使用像 date 这样的标准 html 输入类型 - 没问题。请看附图。

需要如何解决或实施此问题（单元格附近的自动完成部分）的任何建议？

PS 我使用 bootsrap-autocomplete bootstrap-autocomplete

【问题讨论】：

Tabulator 中已经内置了一个可与 Ajax 配合使用的自动完成编辑器。

标签： javascript css autocomplete tabulator

【解决方案1】：

您看到这个的原因是因为制表单元格已将溢出设置为隐藏。大多数自动完成小部件允许您指定列表应该附加到正文而不是元素本身，这会解决这些问题。但我在您选择的小部件上看不到该选项。

我建议使用 Tabulators 内置的自动完成编辑器，它可以提供您正在寻找的所有功能。详情请参阅Built in editor docs

【讨论】：

非常感谢您的回答和很棒的组件:) 我看到了提到的文档...但是我对 JS 不太熟悉。据我了解，我需要提供值作为具有值属性的参数或函数返回对象。我有超过 40 万个项目可以在自动完成编辑器中显示。进入编辑模式后，我根据其他单元格值（以减少项目数量）进行 API 请求，这就是问题所在。客户使用 IE 11 :) 我不能使用 async await，fetch，不熟悉 Babel。我基于回调的实现不起作用。我会进一步调查。
您可以使用内置的。只要你使用像 core.js 这样的 polyfill 库，它就可以在 ie11 上运行。 fetch 和 promise 都有 IE11 兼容的 polyfill。如果您在 IE 11 上使用 Tabulator，那么您必须已经将这些 polyfill 中的大部分放置在适当的位置，否则 Tabulator 将无法工作。查看此链接以获取更多信息tabulator.info/docs/4.7/browsers