Implement AutoComplete into a JavaScript Spreadsheet

// 1. Implement the AutoCompleteCellType custom cell using the Base class
      AutoCompleteCellType.prototype = new GC.Spread.Sheets.CellTypes.Base();

// 2. Create the editor
AutoCompleteCellType.prototype.createEditorElement = function (context) {
  var editor;
  // 2.1) Create a div element to appear as the editor
  editor = document.createElement('div')
  // 2.2) Set the editors attributes and append a select element
  editor.setAttribute("gcUIElement", "gcEditingInput");
  editor.appendChild(document.createElement('select'));
  editor.children[0].style.width = "100%";
  editor.children[0].style.height = "100%";
  // 2.3) Get the cells width and height to set the width and height of the editor
  var cellRect = context.sheet.getCellRect(context.row, context.col);
  editor.style.width = cellRect.width + 'px';
  editor.style.height = cellRect.height + 'px';
  // 2.4) Whenever a result is selected from the select2 dropdown, end editing on SJS's cell
  $(editor).find('select').on('select2:select', function (e) {
    context.sheet.endEdit();
  });
  // 2.5) Whenever the select2 dropdown is opened, set the attributes of the dropdown
  $(editor).find('select').on('select2:open', function (e) {
    $('.select2-dropdown').attr("gcUIElement", "gcEditingInput");
  });
  return editor;
}

// 3. Paint a cell on the canvas
AutoCompleteCellType.prototype.paint = function (ctx, value, x, y, w, h, style, options) {
  if (value) {
    GC.Spread.Sheets.CellTypes.Base.prototype.paint.apply(this, [ctx, value.id + ": " + value.value, x, y, w, h, style, options]);
  }
};

      // 4. Activate and Deactivate the editor     
AutoCompleteCellType.prototype.activateEditor = function (eContext, cellStyles, cellRect) {
        // 4.1) Find select2 element add a remote data source
        $(eContext).find('select').select2({
          ajax: {
            url: "https://raw.githubusercontent.com/kshkrao3/JsonFileSample/master/select2resp.json",
            dataType: 'json',
            delay: 250,
            // 4.2) return the search term
            data: function (params) {
              return {
                q: params.term // search term
              };
            },
            // 4.3) Process the results into the format expected by Select2
            processResults: function (data, params) {
              var resData = [];
              data.forEach(function (value) {
                if (value.name.indexOf(params.term) != -1)
                  resData.push(value)
              })
              return {
                results: $.map(resData, function (item) {
                  return {
                    text: item.name,
                    id: item.numericCode
                  }
                })
              };
            },
            cache: true
          },
          minimumInputLength: 1,
        });

AutoCompleteCellType.prototype.deactivateEditor = function (eContext, context) {
       // 4.4) Remove the select2 widget
        $(eContext).find('select').select2('destroy');
      }

// 5. Get and set the Editor Value
// 5.1) get the editor value and assign the id and text as the id and value
AutoCompleteCellType.prototype.getEditorValue = function (eContext) {
  var data = $(eContext).find('select').select2('data');
  if (!data || !data.length) {
    return null;
  }
  return Object.assign({}, {
    id: data[0].id,
    value: data[0].text
  });
}
// 5.2) Set the editor value with an option that uses the returned value and id and appends it to the select element
AutoCompleteCellType.prototype.setEditorValue = function (eContext, val) {
  if (!val) {
    return;
  }
  var op = new Option(val.value, val.id, true, true);
  $(eContext).find('select').append(op).trigger('change');
}

// 6. Handle reserved keyboard keys
      AutoCompleteCellType.prototype.isReservedKey = function (e, context) {
        if (context.isEditing && (e.keyCode == 40 || e.keyCode == 38 || e.keyCode == 13 || e.keyCode == 27)) {
          return true;
        }
        return GC.Spread.Sheets.CellTypes.Text.prototype.isReservedKey.apply(this, arguments);
      }

sheet.getRange(-1, 1, -1, 1).cellType(new AutoCompleteCellType()).width(250);

sheet.getCell(2, 1, GC.Spread.Sheets.SheetArea.viewport).cellType(new AutoCompleteCellType()).value({
  id: 123,
  value: "Enter Value"
});