Multiselect, additional input field


#1

Hello,

I want to have a additional field where I can enter some data. Is this possible?

Example:

In the search I enter the name of an article. Then I see the name and a additional input field where I can enter the amount of this article. And then I add it to the select, article ID and amount.

Thank you,
Reinhard


#2

I’m not quite sure I understand what you want to do. Do you want to display an input field in the Select2 dropdown next to (or below) the item in the dropdown that matches the current search term? I don’t think that will work. Even if you were to display an input field with the matched item in the dropdown (which is probably possible), as soon as you click on the input field it would select the item (because it’s part of the displayed item) and the dropdown would close. So you wouldn’t be able to type anything into the input field.

What you could do—although it’s a bit complicated—is use a select2:selecting event handler to get the “amount” from the user (for example, using window.prompt() or a custom modal dialog) and store it in an object (associating the amount to the item’s id value). In addition, you would want to specify a custom templateSelection function to display both the selected item’s text (or id, if that’s what you prefer) and the amount for that item’s id you entered.

*Note: when I experimented with this, I found that you cannot store the amount directly in the selected item, because it appears that the select2:selecting event handler gets a copy of the selected item rather than the actual item—which is what gets rendered by the templateSelection function.