SpreadJS supports the concept of CellTypes, which lets you create different types of cells in SpreadJS such as button, combo box, checkbox and hyperlink. You may refer to the following link which elaborates the different cell types. This list also contains a cell of Custom type i.e. CustomCellType. This cell type lets you create several new types of cells, to have different types of functionality in SpreadJS cell. For example, you can create FivePointedStarCellType, FullNameCellType etc. and can refer to the following link describing the same. This blog discusses how we can use this concept to create AutoCompleteCellType in SpreadJS. As the name suggests, AutoCompleteCellType, provides the user with a list of values to select from. However, along with the list, it even provides the user an option to type in the cell and based on the character typed by the user it displays the matching values from the drop down list as input suggestions. The user can select one of these options to set it as the cell value. So, let's see how we can accomplish the same:

1. Derive the Custom CellType to create the AutoCompleteCellType, here is the code:

AutoCompleteCellType.prototype = new $.wijmo.wijspread.CustomCellType();

2. Create a function named items, so that the user can add the items to be displayed in the drop down list, here is the code:

AutoCompleteCellType.prototype.items = function (data)
   if (arguments.length === 0)
      return this._autoCompleteItems;
      this._autoCompleteItems = data;
      return this;

3. Add custom editor to the cell, so as to display the drop down list:

AutoCompleteCellType.prototype.createEditorElement = function (context)
   var container = document.createElement("div");
   var editor = document.createElement("input");
   var $editor = $(editor);
   var $container = $(container);
   $container.css("position", "absolute");
   $container.css("margin", "0");
   $container.attr("gcUIElement", "gcEditor");
   return container;

4. Lastly, we would need to override the activateEditor function so as to convert the custom editor to WijComboBox that would provide the AutoComplete functionality to the cell by setting its "AutoFilter" property to True.

 AutoCompleteCellType.prototype.activateEditor = function (editorContext, cellStyle, cellRect, context)
   var self = this;
   $.wijmo.wijspread.CustomCellType.prototype.activateEditor.apply(self, arguments);
   if (editorContext)
      var $editor = $(editorContext.children[0]);
      this._comboInstance = $editor;
      $editor.width(cellRect.width - 10).height(cellRect.height - 7);
      $editor.wijcombobox({ data: self.items(), autoFilter: true, inputTextInDropDownList: true });
      var p = $editor.data("wijmo-wijcombobox");
      p._comboElement.attr("gcUIElement", "gcEditingInput");
      p._menuUL.attr("gcUIElement", "gcEditingInput");

There are few methods that need to be overridden to accomplish the appearance of the AutoCompleteCellType. You may refer to the sample for complete implementation. Here is a small video demonstrating the final output:

Try SpreadJS's spreadsheet components

Download the latest version of SpreadJS

Download Now!