autoComplete 不显示下拉框选项

JoestarXu

https://demo.grapecity.com.cn/Sp ... /demos/autoComplete。

给单元格加入celltye,不显示下拉框，如图：

image.png886673278.png

参考了上面demo的代码，如下代码：
let availableTags=["CSSd"];
cell.cellType(new AutocompleteCellType(availableTags));

export class AutocompleteCellType extends GC.Spread.Sheets.CellTypes.Base {
  constructor(itemNames) {
super()
this.itemNames = [];
if (itemNames && itemNames.length) {
      this.itemNames = itemNames;
}
  }

  createEditorElement(context){
return document.createElement("input");
  }

  activateEditor(editorContext, cellStyle, cellRect, context){
var $editor = $(editorContext);
GC.Spread.Sheets.CellTypes.Base.prototype.activateEditor.call(this, editorContext, cellStyle, cellRect, context);
$editor.css("position", "absolute");
$editor.css("font", cellStyle.font);
$editor.css("color", cellStyle.foreColor);
$editor.css("border-bottom", "none");
$editor.css("border-left", "1px solid white");
$editor.css("border-top", "1px solid white");
$editor.attr("gcUIElement", "gcEditingInput");
$editor.autocomplete({
      source: this.itemNames
}); // initialize autocomplete widget
$editor.autocomplete("widget").attr("gcUIElement", "gcEditingInput"); // keep focus when mouse down on dropdown
return $editor;
  }

  deactivateEditor(editorContext, context){
if (editorContext) {
      var $editor = $(editorContext);
      // $editor.autocomplete("hide");
      $editor.autocomplete("destroy");
}
GC.Spread.Sheets.CellTypes.Base.prototype.deactivateEditor.call(this, editorContext, context);
  }

  setEditorValue(editorContext, value, context){
$(editorContext).val(value);
  }
  getEditorValue(editorContext, context){
return $(editorContext).val();
  }
  updateEditor(editorContext, cellStyle, cellRect, context){
if (editorContext) {
      var $editor = $(editorContext);
      $editor.css("width", cellRect.width);
      $editor.css("height", cellRect.height);
}
  }
  isReservedKey(event, context){
if (context.isEditing && (event.keyCode == 40 || event.keyCode == 38)) {
      return true;
}
return false;
  }
}

JoestarXu · JoestarXu

   activateEditor(editorContext, cellStyle, cellRect, context) {
      var $editor = $(editorContext);
      GC.Spread.Sheets.CellTypes.Base.prototype.activateEditor.call(
      this,
      editorContext,
      cellStyle,
      cellRect,
      context
      );
      $editor.css("position", "absolute");
      $editor.css("font", cellStyle.font);
      $editor.css("color", cellStyle.foreColor);
      $editor.css("border-bottom", "none");
      $editor.css("border-left", "1px solid white");
      $editor.css("border-top", "1px solid white");
      $editor.attr("gcUIElement", "gcEditingInput");
      $editor.autocomplete({
      minLength : 0,
      source: this.itemNames,
      }).focus(function () {
      $(this).autocomplete('search', $(this).val())
      }); // initialize autocomplete widget
      $editor.autocomplete("widget").attr("gcUIElement", "gcEditingInput"); // keep focus when mouse down on dropdown
      if ($editor.val() == "") {
      $editor.autocomplete("search", "");
      }
      return $editor;
   }

用上面这段代码替换activateEditor这个方法就可以了。

MillionDream · MillionDream

您好，可以提供一个能运行的Demo吗？只看代码的话很难定位问题在哪。

Dtttax · Dtttax

andout.html:163 Uncaught TypeError: $editor.autocomplete is not a function

这个地方错误，不知道怎么改。

MillionDream · MillionDream

Dtttax 发表于 2023-5-8 14:09
andout.html:163 Uncaught TypeError: $editor.autocomplete is not a function

这个地方错误，不知 ...

您这个错误是怎么触发的呢？我看到你给我的Demo里面有1个json和2个ssjson，我应该打开哪一个才能复现你说的这个错误？

Dtttax · Dtttax

只打开那个html文件就可以了。
spread.getActiveSheet().getCell(13,1).cellType(new AutocompleteCellType(availableTags));

双击14行第二列就重现了。

JoestarXu · JoestarXu

autoComplete是jquery-ui这个包里面的东西，您的Demo里面并没有安装这个包，所以才会导致找不到autoComplete这个方法。

图片.png226804198.png

Dtttax · Dtttax

添加了还是不行。

JoestarXu · JoestarXu

您Demo中jQuery和jQuery-UI的版本有冲突，我把处理好的Demo发给您。

test2.rar (8.09 MB, 下载次数: 77)

Dtttax · Dtttax

还是不行啊，直接这样设置的celltype，但是不处理。
spread
      .getActiveSheet()
      .getCell(13, 1)
      .cellType(new AutocompleteCellType(availableTags));

		自动登录	找回密码
密码			立即注册

[已处理] autoComplete 不显示下拉框选项

最佳答案

15 个回复