如何解决制表符自动完成定制编辑器和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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。