我正在尝试向 SpreadJS 中的列添加自动完成功能，这样当用户在单元格中键入时，将出现一个下拉列表，其中包含从服务器检索到的匹配项。 SpreadJS 文档指出：
SpreadJS 支持组合框、复选框、按钮、文本、超链接， Wijmo 编辑单元格 (AutoCompleteTextBox)，以及自定义单元格类型。
http://helpcentral.componentone.com/NetHelp/SpreadHClientUG/celltypes.html
AutoCompleteTextBox 听起来可以解决问题；但是，我找不到任何说明如何实现这一点的文档或示例。我可以创建自定义单元格类型，但如果我可以利用已有的功能，那就更好了！
有谁知道我如何实现这个？
谢谢， 斯科蒂
【问题讨论】：
标签： jquery html autocomplete wijmo
我也遇到了同样的问题，但我调整了 TextCellType 以使用 jQueryUI 自动完成功能。
<div>
<input type='hidden' id="dropDownCellInfo" />
<div id="ss" style="height:500px;border:solid gray 1px;"/>
</div>
您可以参考jQuery UI documentation 以了解有关使用自动完成小部件的更多信息。下面的代码创建了一个 TextCellType 并覆盖了它的创建编辑器方法来创建一个文本元素并使用 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);
【讨论】：