制表符自动完成定制编辑器和CSS无法在单元格外显示编辑器

问题描述

我使用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;
}

当自动完成部分被单元“隐藏”时，我出现了行为。如果我使用标准的html输入类型，例如 date -没问题。请参阅所附图片。

是否有任何建议需要解决或实施（单元附近的自动完成部分）？

PS我使用bootsrap-autocomplete bootstrap-autocomplete

解决方法

之所以这样做，是因为制表器单元的溢出设置为隐藏。大多数自动完成窗口小部件都允许您指定将列表附加到正文而不是元素本身，这会带来这类问题。但是我看不到您选择的小部件上的选项。

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

autocomplete javascript tabulator