11

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?

0

4 Answers 4

19

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

2
  • This does NOT seem to work with Select2 4.0.1-rc.1: $.fn.select2.defaults.set("selectOnBlur", "true");
    – EriF89
    Dec 21, 2015 at 13:32
  • 3
    The option has been renamed to selectOnClose
    – kartikluke
    Jul 22, 2017 at 2:47
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.

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.

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 4, 2013 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: gist.github.com/hartator/6689203
    – Hartator
    Sep 24, 2013 at 18:35
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.

1
  • 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, 2012 at 13:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.