ComboBox input value can't search dropdown options value

ComboBox input value can't search dropdown options value

Posted by: pyoh on 25 April 2024, 11:47 am EST

• 

  pyoh

  • Post Options:
  • Link
    Copy

  Posted 25 April 2024, 11:47 am EST - Updated 25 April 2024, 11:53 am EST

  My Problem is same as title.

  my comboBox code like below:

  const options = column.options.map((_option) =>
      Number.isInteger(+_option.value) ? +_option.value : _option.value
  );
  
  const comboBoxCell = new GC.Spread.Sheets.CellTypes.ComboBox();
  comboBoxCell.maxDropDownItems(8);
  
  comboBoxCell.items(options).editable(true);
  sheet.getRange(-1, colIndex, -1, 1).cellType(comboBoxCell);
  const validator = getComboBoxValidator(options);
  validator.inCellDropdown(false);
  sheet.setDataValidator(-1, colIndex, -1, 1, validator);

  if options list [“aa”, “bb”, “cc”, “dd”] and type to input “a”, I want to highlight “aa” option in dropdown options list
  
  but, highlight appear when type exactly same word in above case I typed “aa” and then “aa” option hightlighted.

  I saw other sample, there is no specific different code between my code. but that example works as I wish.

  what is the problem?

• 

  priyam.kushwaha

  

  • Post Options:
  • Link
    Copy

  Posted 29 April 2024, 12:03 am EST

  Hi,

  We are still investigating the issue at our end. We will let you know about our findings as soon as possible.

  Regards,

  Priyam

• 

  priyam.kushwaha

  

  • Post Options:
  • Link
    Copy

  Posted 29 April 2024, 8:36 pm EST

  Hi,

  As per my understanding, you’re interested in having options in a combo box based on input values.

  Currently, this feature isn’t supported, but it’s achievable. You can implement a searchable Combobox by using Custom Cell Type. When the cell is in display mode, you can draw; when the cell is in editing mode, you can design the editor; and you can manage mouse and keyboard interaction with the CellType itself. You can rewrite a wide range of characteristics and functions to obtain specific cells that meet your needs.

  In order to build AutoComplete in JavaScript SpreadSheet, you can refer to the following blog:https://www.grapecity.com/blogs/autocomplete-celltype-in-spreadjs

  You may also use the example below: sjs-autocomplete2 (1).zip

  And you can also refer to this forum link related to this: https://developer.mescius.com/forums/spreadjs/searchable-drop-down-combo-box-list-in-spreadjs

  References:

  Custom Cell Type Demo: https://www.grapecity.com/spreadjs/demos/features/cells/cell-types/custom/purejs

  Cell Types Base Class: https://www.grapecity.com/spreadjs/api/classes/GC.Spread.Sheets.CellTypes.Base

  Regards,
  
  Priyam

• 

  pyoh

  • Post Options:
  • Link
    Copy

  Posted 27 May 2024, 3:55 pm EST

  Hi, kushwaha

  I’m using SpreadJS v17 with React now.
  
  I found a example working as my expected

  https://codepen.io/MESCIUS-Korea/pen/eYgLqeJ

  above example’s using vanilla js library. it is different with react version of spreadjs?

• 

  priyam.kushwaha

  

  • Post Options:
  • Link
    Copy

  Posted 28 May 2024, 3:44 pm EST

  Hi,

  SpreadJS is independent of frameworks, meaning if something works in vanilla JavaScript, it will also work in different frameworks or libraries like React. So, you can use this example in React as well.

  Additionally, please create separate tickets for different queries to avoid any confusion, as this query is different from the initial query in this ticket.

  Regards,
  
  Priyam