Autocomplete on array of Objects

Tags: #<Tag:0x00007f8b1dedefe0>
#1

Hello,

I am working on table of “profs” that can have severals “sections” to teach to. I would like the sections to appear as tag in the cell with an autocomplete type of cell. The data has a prof “name” column and a “sections” column, an array of objects.

I setup a jsfiddle here : https://jsfiddle.net/Nico_L/pjemhxak/78/

I have code a renderer cell to transform the array of object into span elements to be rendered as tags
I have started to code a MyAutocomplete editor class to handle things:

  • open() transforms the sections of array into a string of the sections.title elements separated by a comma
  • getValue() transform the string back into an array of elements for the sections column
  • setValue() allows to get the right format when an element is chosen from the list by a mouse click

the idea for the user is to enter the sections separated by a comma and the source list is getting filter for each section like this:
autocomplete
When the cell is empty, the source list appears correctly but I have not succeeded in making it appear after a comma. I tried to change the context query (this.query) in various places with no success. I looked to the source code of the autocomplete code but still have not clue how to make the list appears after a comma is added.

How could I modify the query to only the part after the last comma so that the autocomplete starts again?

Thanks,
Nicolas

#2

Hi @nicolas

This is very interesting case. However, it’s out of the scope of pre-sale or basic support plan. Can you please send me your license ID at support@handsontable.com?

#3

Hi @adrian.szymanski,

I am working as a volunteer (on my hobby time) for a non-profit organization non-commercial management app. There is no way we could afford a pro licence. I understand the limit of the basic plan. I’ll try to sort it out myself.

Thanks for you return,
Regards,
Nicolas

#4

Hi @nicolas

Thank you for an explanation. I understand. Nevertheless, we would like to be able to help in, at least, some way. If you will encounter any issues related to the core Handsontable functionalities down the road, let us know.

I also found an example that maybe will be helpful for you here:

https://jsfiddle.net/handsoncode/2dvLo0qr/

#5

@adrian.szymanski,

Thanks for your kind answer.

I am starting to get somewhere:
https://jsfiddle.net/Nico_L/pjemhxak/313/
for now only one way to make it work is to entirely type the choices. For instance type in the last right cell “guitar, violin” + enter and both guitar and violin will be added to the cell.

The trick is to disable the sortByRelevance option to prevent a break in the updateChoicesList function and to hack the queryChoices function to modify the query.

I wish I wouldn’t have to hack it, but I don’t know how since it is always called with the TEXTAREA value that has to be modified in my case. To have to disabling the sortByRelevance is limiting the functionalities, maybe there is a smarter way to prevent the break.

Two remaining this to be done:

  • the filtering does not work anymore
  • when selecting a choice either with the keyboard or the mouse, it has to be added to the cell, not replacing the content.

Thanks

#6

Hi @nicolas

I’ll try to figure out how those issues can be solved and I’ll get back to you.

#7

Hi @adrian.szymanski

I have a working solution:
https://jsfiddle.net/Nico_L/pjemhxak/492/

I added a button to each tag to be able to remove then easily with the mouse. If you click on the tag ‘x’, it removes the tag.

  • It’s filtering the source via the source function in the table settings
  • The setValue function allows to cope with enter of mouse click choice in the list.

If there is a less hacky way to perform the same, I would be happy to know.

#8

Hi @nicolas

I reviewed your solution and I didn’t find a better way to meet your requirements at the moment. I’m glad you were able to make it functional.

#9

Hello @adrian.szymanski,

Thanks for your return. I used this code to my ‘real’ app, and it seems to also work just fine.

1 Like
#10