onChange listener for every keyPress in particular cell

Getting help Questions
1

I want to trigger an action on every keystroke of the user in a particular cell. Is there such a listener?

So far I am seeing afterChange hook, but it only triggers once the cell has lost focus, rather than on every keystroke in the cell.
I’ve also looked into beforeKeyDown hook, but it gives me a generic event, and no cell specific info.

Thanks!

2

Hi @quynh.totuan

we have two key events

  1. https://docs.handsontable.com/pro/3.0.0/Hooks.html#event:afterDocumentKeyDown
  2. https://docs.handsontable.com/pro/3.0.0/Hooks.html#event:beforeKeyDown

and if you need any cell info you can call getSelected() method inside the hook. It will return row and column coordinates.

What you would like to do with the cell? Maybe I’ll be able to share more specified tip.

3

Hi Aleksandra,

Thanks - that is a great tipp to use getSelected in combination with the events. That certainly helps.

What I am trying to achieve is to build an autosuggest feature: when the user starts typing, it fetches the results from our API, which are then displayed as a dropdown of suggestions. I’ve looked into your “autocomplete” cell type but the difference is that the “source” property of the cell needs to be updated on every keystroke.

Do you by any chance have any code examples for something like this?

4

Unfortunately, I do not have any similar demo. But I think that you can test the source as a function that returns an array via updateSettings method inside the afterDocumentKeyDown.

5

Thanks, I’ve tried your suggestion. I’ve noticed that I needed to pass an immediately-invoked function to make it work.

However, the dropdown with suggestions does not show up while I am still in the cell. I need to leave the cell and then come back so that the dropdown shows. Do you have a tipp how to work around this?

6

I am afraid that this might be very hard to achieve. Maybe it will be easier to create a custom editor?

7

Makes sense. I will look into custom editors. Thank for you help!

1 Like