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.