I am using select2 4.0.3. I have a select2 box to enter email addresses, and I would like to make sure that all email addresses are included in .val(), also the one that the user was still typing in the search field.

The form field is referenced by $('.invite-emails-field'). When I press the Send button, in the event handler $('.invite-emails-field').val() just gives me the first two addresses [email protected] and [email protected], but not the third address ([email protected]).

This is how I initialize the select2 element:

$('.invite-emails-field').select2({
  tags: true,
  tokenSeparators: [',', ' '],
  selectOnBlur: true
});

The selectOnBlur has no effect, and I cannot find anything else that works on select2 v4. I tried firing several events at various elements, none of it worked.

I expect that when I press the Send button, that I can make some call to the select2 box to trigger creating a tag for the contents of whatever is then in the search field [email protected], and that subsequently .val() returns an array with all three addresses.

Update: I created a jsFiddle for you to play with. Enter input like this:

and then press the Send button, you will see:

where [email protected] is missing from the output.

Note that in my real application I have disabled the dropdown because I just want the tagging behaviour.

I am using select2 4.0.3. I have a select2 box to enter email addresses, and I would like to make sure that all email addresses are included in .val(), also the one that the user was still typing in the search field.

The form field is referenced by $('.invite-emails-field'). When I press the Send button, in the event handler $('.invite-emails-field').val() just gives me the first two addresses [email protected] and [email protected], but not the third address ([email protected]).

This is how I initialize the select2 element:

$('.invite-emails-field').select2({
  tags: true,
  tokenSeparators: [',', ' '],
  selectOnBlur: true
});

The selectOnBlur has no effect, and I cannot find anything else that works on select2 v4. I tried firing several events at various elements, none of it worked.

I expect that when I press the Send button, that I can make some call to the select2 box to trigger creating a tag for the contents of whatever is then in the search field [email protected], and that subsequently .val() returns an array with all three addresses.

Update: I created a jsFiddle for you to play with. Enter input like this:

and then press the Send button, you will see:

where [email protected] is missing from the output.

Note that in my real application I have disabled the dropdown because I just want the tagging behaviour.

• javascript
• jquery
• jquery-select2

• Would you happen to be able to create a fiddle that we could demo? – Brooke Holmes Commented Oct 12, 2016 at 10:12
• @SamHolmes Thanks for looking into this, I have created a minimal jsFiddle that shows the problem and added this as update to my question. The link is jsfiddle/cn19gmfq – Martijn de Milliano Commented Oct 12, 2016 at 19:43
• Updated link: jsfiddle/mjdemilliano/cn19gmfq/8 – Martijn de Milliano Commented Oct 12, 2016 at 20:12
• That fiddle does not allow me to type in email addresses like [email protected] - after the @ symbol I cannot continue to type anything. How do you enter them? – Matt Commented Oct 14, 2016 at 10:48

1 Answer 1

You need to add selectOnClose and set it to true so that it creates the tag for you when you close / click off of the search input.

$('select').select2({
  selectOnClose: true
});

See the official documentation here: https://select2.github.io/options.html#can-i-select-the-highlighted-result-when-the-dropdown-is-closed