I'm using the jQuery select2 library and have tags enabled so that I can dynamically add options to the dropdown list. However, I would like to customize what the tag option looks like so that it is clear that choosing it will add the option. This is my setup:

$field.select2({ 
  data: response,
  tags: true,
});

Currently it renders like this:

But I would like it to render something like this:

I tried playing around with the createTag property but wasn't able to figure out a solution.

I'm using the jQuery select2 library and have tags enabled so that I can dynamically add options to the dropdown list. However, I would like to customize what the tag option looks like so that it is clear that choosing it will add the option. This is my setup:

$field.select2({ 
  data: response,
  tags: true,
});

Currently it renders like this:

But I would like it to render something like this:

I tried playing around with the createTag property but wasn't able to figure out a solution.

• javascript
• jquery
• jquery-select2

2 Answers 2

Set configuration options templateResult (how options appear in the dropdown) and templateSelection (how the selected option is rendered). Both of these are callbacks so the value will be a function.

Here's the example shown in the Dropdown section of the docs:

function formatState (state) {
  if (!state.id) {
    return state.text;
  }
  var baseUrl = "/user/pages/images/flags";
  var $state = $(
    '<span><img src="' + baseUrl + '/' + state.element.value.toLowerCase() + '.png" class="img-flag" /> ' + state.text + '</span>'
  );
  return $state;
};

$(".js-example-templating").select2({
  templateResult: formatState
});

See also the configuration API for an overview of the configuration options.

Expanding on Paul's answer, here's a mostly plete working example for you using the tags and templateResult options. It conditionally apply formatting when the typed text is a new tag (wasn't part of the original select options).

UPDATE

It turns out you're correct that templateSelection isn't the answer since the + sign only appears when the dropdown is displayed and that's in the templateResult callback. So the answer was to make templateResult more robust with a few extra conditions. The idea is track a new tag by saving it in a variable called recentlySelected. This way when the dropdown renders, if the value matches recentlySelected, then don't display the + sign. Working example is updated. This modification makes it a fully plete answer.

// Populate an array of initial options.
var options = $("#field option").map(function(){
  return this.value.toLowerCase();
}).get();
var recentlySelected = '';

// Create select2
$("#field").select2({
  tags: true,
  templateResult: formatTag
});

// formatTag to conditionally applies formatting
function formatTag(filteredOption) {

  if (recentlySelected.toLowerCase() === filteredOption.text.toLowerCase()) {
    return filteredOption.text;
  }

  if (options.indexOf(filteredOption.text.toLowerCase()) === -1) {
    // Typed text wasn't an original option, prepend with '+' sign.
    if (filteredOption.text !== 'Searching…') {
      recentlySelected = filteredOption.text;
    }
    return '+ ' + filteredOption.text; 
  }

  return filteredOption.text;

};

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/select2/4.0.5/css/select2.min.css" />
<script src="https://cdnjs.cloudflare./ajax/libs/select2/4.0.5/js/select2.js"></script>

<select id="field">
  <option value="First Option">First Option</option>
  <option value="Second Option">Second Option</option>
  <option value="Third Option">Third Option</option>
  <option value="Fourth Option">Fourth Option</option>
</select>