Select2 Create multiple with validation

Select2 Create multiple with validation

by Thomas GĂĽttler

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select class="form-control" multiple="multiple" style="width: 50em">
  <option selected="selected">foo@e.com</option>
  <option>bar@e.com</option>
  <option selected="selected">blu@e.com</option>
</select>

Try to copy+paste this: <pre>one@e.com two@e.com three@e.com</pre>

The last mail address (three@e.com) does not get a new tag.

Related: <a href="https://forums.select2.org/t/copy-paste-three-mail-addresses-jsfiddle-included/370">https://forums.select2.org/t/copy-paste-three-mail-addresses-jsfiddle-included/370</a>

JavaScript

$("select").select2({
    tags: true,
    tokenSeparators: [',', ' '],
    createTag: function (params) {
    // Don't offset to create a tag if there is no @ symbol
    if (params.term.indexOf('@') === -1) {
      // Return null to disable tag creation
      return null;
    }

    return {
      id: params.term,
      text: params.term,
      //newTag: true
    }
  }
  });