Handsontable: Multiple entries in cell using autocomplete

[shivrajsa]

Currently autocomplete has below behavior

1. When user types characters, it shows suggested words.
2. Once user selects the word from drop down, cell goes in non editable mode.

My requirement is

1. When user types characters, it will show suggested words
2. Even after user selects the word from drop down , cell should be in editable mode.
3. If user starts typing again, it should show suggested word in drop down for autocomplete. (It should ignore previously selected word to compute autocomplete list)
4. Once user clicks outside table, cell will go in non editable mode.

I am trying to understand,how can I do it, but finds it difficult. Please guide.

[AMBudnik]

Hi @shivrajsa
There's no option like described currently in our feature set. You can try to create a custom editor but this will take a lot of work.
I recommend checking the Stackoverflow, the Handsontable community there is really active and maybe there's someone who already did that.

[shivrajsa]

There is a plugin for text area autocomplete
I get suggestions every time I type in cell using this plugin, but when I select the value it is not updated in the cell.

Could you please check how can we integrate this plugin.

[AMBudnik]

it looks like you only have to add new classes to the list element. I personally do not know this library so I cannot create you a working demo.

[viqtor1]

Hello @AMBudnik , I am interested as well in integrating a more advanced autocomplete for handsontabe, I am using this plugin for that: jquery-textcomplete. I am hoping that you can point me in the right direction with this. So textcomplete requires a textarea or a contenteditable element to be able to access the auto-completion. So I added the property contenteditable=true to the td elements in handsontable. The problem is that handsontable uses it's own textarea when selecting a cell or multiple - it doesn't actually add the ability to input text directly to the td elements - which was what I've hoped for.
The question is: How can I access the textarea instantiated by the handsontable and insert the methods from the other plugin when imputing text? Can you think of an easy way to do so, or I have to try to hack the handsontable plugin? I'm not sure how handsontable interacts with this textarea, maybe you can shine some light on that.

Sorry about the wall of text, I was stuck on this problem for a couple of days. If you guys are interested in this, I will try to merge this new feature in the project :)

[shivrajsa]

I think you just have to use class name of default textarea of Handsontable which is 'handsontableInput' in jquery-textcomplete function & calll that function in below function , or other similar function.
afterSelection : function (instance,row,col,td) { //jquery-textcomplete demo "Apply to Multiple Textareas" $('.handsontableInput').textcomplete([ { // tech companies words: ['apple', 'google', 'facebook', 'github'], match: /\b(\w{2,})$/, search: function (term, callback) { callback($.map(this.words, function (word) { return word.indexOf(term) === 0 ? word : null; })); }, index: 1, replace: function (word) { return word + ' '; } } ]); },

I have added "Apply to Multiple Textareas" example from demo

Please let us know if you succeed to implement it.

[viqtor1]

@shivrajsa Thanks a lot! It works, but only after you already selected something in the table, I'm guessing because handsontableInput is not initialized yet. I've changed the afterSelection callback event to afterSelectionEnd and it works perfectly :) Thanks for all the help, you saved me weeks of work.

[shivrajsa]

Great news, Thanks for your feedback, I will also try same plugin for my project.

[viqtor1]

@shivrajsa I found a serious issue, I have to disable the arrow buttons events for handsontable once you start to autocomplete something. How can I do that?

[shivrajsa]

I need to try integration of both libraries, but I am wondering if it is because of "afterSelectionEnd" because using arrows it could be calling "afterSelectionEnd" whenever you use arrow. We may have to find better function which will initialize autocomplete only when user switch cell to editable mode.

[viqtor1]

I found a quick and dirty fix for this issue: just add this function to Handsontable object:

beforeKeyDown: function (event) { if ([38, 39, 40, 37, 13, 27].indexOf(event.keyCode) != -1) event.stopImmediatePropagation(); },

this will prevent registering the arrows, enter and escape. it's what I need for now. Maybe later I will check to only use this when the dropdown from autocomplete is active, but for now, it's working

[shivrajsa]

@viqtor1 did you get any success to use arrows, enter, esc for autocomplete list when list is active?
Currently when I use down key & enter, it changes cell down the selected cell.

[viqtor1]

@shivrajsa I just wrote in the previous comment that if you want to disable the arrow keys, enter and escape you have to add this function in the Handsontable definition:

beforeKeyDown: function (event) { if ([38, 39, 40, 37, 13, 27].indexOf(event.keyCode) != -1) event.stopImmediatePropagation(); },

Have you tried it? Does it work for you? For me it works good enough for now.

[shivrajsa]

@viqtor1 I used beforeKeyDown, but my requirement is little more, I want to use autocomplete multiple times in single cell when it is in editable mode.

Currently when I select autocomplete value first time, cell is no more in editable mode. Everytime I have to switch it to editable mode.

Do you know any solution for this?

[viqtor1]

@shivrajsa I do not understand what you want. Here is my example: test
In the third column of the table you can edit and autocomplete values. The arrow keys, space and enter are disabled, so you can navigate properly through the autocomplete list. Please use this example to tell me what is different from your expectations. Cheers!

[AMBudnik]

I think that this issue can be closed as the recent reply was made more than a month ago but if you need any more information - just let me know.

[shivrajsa]

@viqtor1 I am back to solve this problem for my project.

I copied your fiddle in the HTML page. Here is the Gist.

Still it is not working for event.stopImmediatePropagation();

Could you please check same at your end you may have to provide Jquery, Handsontable and Autocomplete libraries path in the HTML

[AMBudnik]

Hi @shivrajsa
I'm afraid that I cannot help as the following code relates to a custom solution. Currently we do not have a similar option that can be used instead.

[viqtor1]

Hello @shivrajsa

I have checked again my fiddle and your html file - I got the desired behavior.
It would be really helpful if you could explain what do you exactly wish to happen.

Does my fiddle works for you as well? What happens when you start typing 'apple' in the third column?
Do you get any errors when running my code locally?

Please answer this questions, and I will try to find a solution.

[shivrajsa]

@viqtor1 your Fiddle works perfectly but when I use it locally as shared in HTML file, I get suggestions,
but after Enter key

1. Selected suggestions goes in cell
2. But cell is no more in editable mode
3. Cell below working cell, gets selected ( Expected behavior is after Enter, working cell should be in editable mode )
   I do not get any error in console.
   I expect it to work locally same as Fiddle.

Do you think its problem of versions of scripts, which versions are you using for Jquery, Handsontable & Atocomplete ?

[viqtor1]

Jquery: 1.9.1, textcomplete: 1.6.0, Handsontable 0.26.0

[shivrajsa]

@viqtor1 Yes, that was version issue, my handsontable version was 0.16.1. I replaced with 0.26.0 and it works as expected.
Thank you for all your help :+1:

But I have one more requirement, I want to use Enter & Arrows keys in table when not using suggestions.
Do you have any idea to achieve this?

[viqtor1]

Yes, I had the same issue.

I wanted to avoid hacking either handsontable and textcomplete, so I added a listener for textcomplete events and changed some flags to have the current status of the autocomplete dropdown.
Up and Down arrows need to be handled a bit different from Left and Right.

Check this code fiddle and let me know if the behavior suits your needs.
Cheers!

[shivrajsa]

@viqtor1 Yes, it solves my problem, you really saved my lot of time & efforts :+1: