(function () {
  "use strict"
  var root = this,
      $ = root.jQuery;

  if (typeof root.GOVUK === 'undefined') {
    root.GOVUK = {};
  }

  root.GOVUK.Tagging = {
    ready: function(options) {
      $('.js-tag-list').select2({
        tags: options['autocompleteWith'],
        tokenSeparators: [','],
        initSelection: function (input, setTags) {
          setTags(
            $(input.val().split(",")).map(function () {
              return {
                id: $.trim(this),
                text: $.trim(this)
              };
            })
          )
        }
      })
    }
  };
}).call(this);

(function () {
  "use strict"
  var root = this,
      $ = root.jQuery;

  if (typeof root.GOVUK === 'undefined') {
    root.GOVUK = {};
  }

  root.GOVUK.Tagging = {
    ready: function(options) {
      $('.js-tag-list').select2({
        tags: options['autocompleteWith'],
        selectOnBlur: true,
        tokenSeparators: [','],
        initSelection: function (input, setTags) {
          setTags(
            $(input.val().split(",")).map(function () {
              return {
                id: $.trim(this),
                text: $.trim(this)
              };
            })
          )
        }
      })
    }
  };
}).call(this);

Allow entered text to be used as a tag
Allow entered text to be used as a tag

In user research a common problem with tagging was discovered. Users
would enter text into the input field then click away or on the submit
button. The default behaviour would hide the tag drop down and lear the
tag input. So forms were being submitted without the intended tags.

* Use the select2 option “selectOnBlur” to turn user input into a tag
on blur
