jQuery Select2 Tag on Blur

Question

I'm using Select2 to create a Gmail-style e-mail addresses field in my application. It works great except for one case: when the user types in an e-mail address and doesn't put a space or comma after it, and doesn't hit enter or tab. For example, if they just type an e-mail address and then use the mouse to select the next field in the form, the e-mail address they typed goes away.

I have an example jsfiddle here that illustrates the problem.

Here's how I'm setting up select2 on my hidden input:

$(function(){
    $('input').select2({
        tags: [],
        width: "300px",
        dropdownCss: {display: 'none'},
        tokenSeparators: [',', ', ', ' ']
    });
});

Is there a way for me to set up select2 so that onBlur it just takes whatever is left and is not currently a tag and makes it one?

score 19 · Accepted Answer · answered Feb 08 '13 at 16:22

19

This is now supported in version 3.3 of the select2 library using the 'selectOnBlur' option.

answered Feb 08 '13 at 16:22

davertron

1,427
1
14
28

This does NOT seem to work with Select2 4.0.1-rc.1: `$.fn.select2.defaults.set("selectOnBlur", "true");` – EriF89 Dec 21 '15 at 13:32
3

The option has been renamed to `selectOnClose` – kartikluke Jul 22 '17 at 02:47

score 4 · Answer 2 · answered Jul 22 '17 at 02:46

4

From the documentation as of 4.0.3:

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

This will capture the selection and create a tag if the user clicks elsewhere.

answered Jul 22 '17 at 02:46

kartikluke

2,375
1
19
32

score 3 · Answer 3 · answered Dec 19 '12 at 03:09

3

I had a form with select2 (tag mode) and a submit button. By default when user types a tag, without selecting the tag from drop down or pressing one of triggering control keys, the user entry will be lost because plugin closes the generated input dom object on blur event.

My quick fix to this problem was to hack the plugin blur function and to add the following lines:

var val=this.search.val();
if($.trim(val)!='') this.onSelect({id:val,text:val});

Once blur function is called, the above code checks if user entry. If there's any it triggers select event and sends the required object. The object i'm passing is suitable only for select2 in tagging mode and if you use select2 v3.2 this line can be inserted at start of blur function of AbstractSelect2 on line 1311. I hope this gives you an idea on how to customize the widget according to your needs.

answered Dec 19 '12 at 03:09

Ramin

61
2

1

While I don't like having to modify the library myself to get this functionality, it's the only answer that works so far. The one additional change I made was to pass a "noFocus: true" through to the "onSelect" method, and then at the bottom check for that and not call "focusSearch", since it's really annoying to enter text, click another text field and then have the old select2 box focused again. – davertron Jan 04 '13 at 18:57
Thanks to @Ramin and @davertron! For some reasons, I can't use the last version of select2 (an outside click won't close anything) so I get back to v3.2 and make the two hacks of you guys. Was pretty tricky because I've accessed only to a minified version. Anyway, here the final gist of the hack, for other people: https://gist.github.com/hartator/6689203 – Hartator Sep 24 '13 at 18:35

score 1 · Answer 4 · answered Dec 11 '12 at 12:57

1

I dont really understood what you are trying to do here because you are speaking about emails:

jQuery(element.val().split(",")).each(function () {
                data.push({id: this, text: this});
            });

But you could try this instead:

var splitted = element.val().split(",");
for(var i=0,z=splitted.length;i<z;i++)
    data.push({id: splitted[i], text: splitted[i]});

By the way, your jsfiddle is uncomplete.

answered Dec 11 '12 at 12:57

A. Wolff

74,033
9
94
155

I've removed those settings because they're not relevant to the problem at hand and updated my fiddle and code above. – davertron Dec 11 '12 at 13:11

jQuery Select2 Tag on Blur

4 Answers4

Linked