单元格上方可手动自动完成 pop/display

Question

是否有任何相对简单的方法可以让自动完成功能在单元格下方不可见时弹出到单元格上方？

如果可能的话，我宁愿不修改 handsontable.js 或引入新包。

现在使用 z-index 我可以强制它显示在我的页脚上，但我仍然希望它向上而不是向下。

我看过 https://github.com/trebuchetty/Handsontable-select2-editor，但我真的不想引入新包。

Answer 1

有一种方法可以在没有包的情况下做到这一点，但这意味着要提出一些有趣的 jquery 逻辑。您想要执行的操作如下：

使用选择器.height() 在下拉列表中添加一个计算其高度的事件，并将其添加到当前位置。如果这个新值大于 table 上的底线，它就溢出了，所以你想通过计算新位置并设置它来向上移动它。

这是有趣的部分。为此，您需要考虑 HTML 坐标。您有下拉列表的左上角位置及其高度。要将其放在单元格上方，新位置将是 dropPosition + dropHeight + cellHeight。现在第一次渲染时一切正常，但是当你滚动时，它会出现问题。

我还没有写过这个，但我将来可能会写。如果您开始 fiddle，我们可以分叉它并尝试制定更具体的解决方案。

Answer 2

感谢 ZekeDroid 的建议！这是我想出的：

$scope.htSettings.afterOnCellMouseDown = function (event) {
   if(event.realTarget.className.indexOf('htAutocompleteArrow') >= 0) {
       orientDropdown();
   }
};

$scope.htSettings.beforeKeyDown = function () {
   if ($("td.current").attr("class").indexOf('htAutocomplete') >= 0) {
       orientDropdown();
   }
};

orientDropdown = function () {
   $(".autocompleteEditor").css("visibility", "hidden"); //Hide dropdown until ready to display to prevent flicker as orientation is adjusted

   setTimeout(function () { //Give dropdown time to load so we can access height etc.
       var tableBottom = $("body").outerHeight();   //I originally used $(".wtHolder").offset().top + $(".wtHolder").height() for table edge

       if ($(".autocompleteEditor").length) {
           var dropdownBottom = $(".autocompleteEditor").offset().top + $(".autocompleteEditor").outerHeight();
           var dropdownInverted = $(".autocompleteEditor").offset().top + 2 * $(".autocompleteEditor").outerHeight() + $("td").outerHeight();
           var dropdownOverflowed = $(".autocompleteEditor").css("position") === 'fixed' && dropdownBottom > tableBottom;
           var keepDropdownSetting = $(".autocompleteEditor").css("position") === 'relative' && dropdownInverted > tableBottom;
           if (dropdownOverflowed || keepDropdownSetting) {
               var optionsHeight = -($("td").outerHeight() + $(".autocompleteEditor").outerHeight());
               $(".autocompleteEditor").css("position", "relative");
               $(".autocompleteEditor").css("top", optionsHeight);
           } else {
               $(".autocompleteEditor").css("position", "fixed");
               $(".autocompleteEditor").css("top", "");
           }
       }
       $(".autocompleteEditor").css("visibility", "visible");
   }, 80);
};

单元格上方可手动自动完成 pop/display

Handsontable autocomplete pop/display above cell

javascript

autocomplete

handsontable