用SpreadJS自动完成

Question

我试图将自动完成功能添加到SpreadJS中的一个列中，这样，当用户在单元格中键入时，将出现一个下拉列表，并从服务器检索到匹配的项。SpreadJS文档声明：

SpreadJS支持组合框、复选框、按钮、文本、超链接、Wijmo编辑单元格(AutoCompleteTextBox)和自定义单元格类型。

http://helpcentral.componentone.com/NetHelp/SpreadHClientUG/celltypes.html

AutoCompleteTextBox听起来可能会起作用；但是，我找不到任何文档或示例来演示如何实现这一点。我可以创建一个自定义的单元格类型，但是如果我能够利用已经存在的功能，它会更好！

有人知道我如何实现这一点吗？

谢谢你，斯科蒂

Answer 1

我也有同样的问题，但是我调整了TextCellType以使用jQueryUI自动完成。

  <div>
    <input type='hidden' id="dropDownCellInfo" />
    <div id="ss" style="height:500px;border:solid gray 1px;"/>
  </div>

您可以参考jQuery UI文档来了解有关使用自动完成小部件的更多信息。下面的代码创建一个TextCellType并重写它的CREATE编辑器方法来创建一个文本元素，并使用jQuery自动完成对其进行初始化。

我必须使用一个隐藏的文本元素来捕获行和列，在其中我必须在从列表中选择一个选项之后更新该值。也许有更好的方法，但这起作用了。

  var cellType = new $.wijmo.wijspread.TextCellType();
  cellType.createEditorElement = function(context)
  {
    var obj = jQuery('#dropDownCellInfo');
    obj.data('sheet' , context.sheet);
    obj.data('row', context.row);
    obj.data('col', context.col);

    console.log(context);
    var $textarea = $('<input type="text" id="txtSearch" style="visible:false" />');
    var editor = document.createElement("div");
    $(editor).append($textarea);
    $textarea.autocomplete({
      minLength: 2,
      autoFocus : true,
      source: 'http://localhost/spreadjs/index.php',
      focus: function( event, ui ) {
        $( "#txtSearch" ).val( ui.item.inst_name );
        return false;
      },
      select: function( event, ui ) {
        $( "#txtSearch" ).val( ui.item.inst_name );              
        var obj = jQuery('#dropDownCellInfo');
        var spd = jQuery("#ss").wijspread("spread").getActiveSheet().setActiveCell(obj.data('row'),obj.data('col'));

        // We have to explicitly remove the list element from the DOM because some 
        // how the method creates a new list for each autocomplete request and does not deletes the list after onSelect event.
        jQuery('ul.ui-autocomplete').remove();
        return false;
      }
    })
    .autocomplete( "instance" )._renderItem = function( ul, item ) {
      return $( "<li>" )
        .append( "<a>" + item.inst_name + "</a>" )
        .appendTo( ul );
    };
    return editor
  };
  sheet.getColumn(3).cellType(cellType);

Answer 2

我联系了Wijmo:这是文档中的一个错误。但是，它们确实提供了一个使用自定义单元格类型来实现类似功能的示例。