Tagging text in jquery select2

Question

<select multiple id="e1" style="width:300px">
        <option value="AL">Alabama</option>
        <option value="Am">Amalapuram</option>
        <option value="An">Anakapalli</option>
        <option value="Ak">Akkayapalem</option>
        <option value="WY">Wyoming</option>
    </select>

$("#e1").select2({'placeholder': ' ','allowClear': true});

it is working fine for matched text. But i want to tag text(which doesnot match any option). Kindly help.

please find the demo code in following link. http://jsfiddle.net/marcusasplund/jEADR/2/

Answer 1

You have the tags option, but it can't be used with select element

$("#e1").select2({
  tags: [{
    "id": "AL",
    "text": "Alabama"
  }, {
    "id": "Am",
    "text": "Amalapuram"
  }, {
    "id": "An",
    "text": "Anakapalli"
  }, {
    "id": "Ak",
    "text": "Akkayapalem"
  }, {
    "id": "WY",
    "text": "Wyoming"
  }]
});

<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.css"/>

<input id="e1" style="width:300px" />

Answer 2

There is an option called tags in select2 which allows you to unmatched text to tags but there are some problems here.

• It will not allow you to set tags option if you are binding select2 plugin on select. So for this you need to bind select2 on input.

SOURCE QUESTION

• Select2 Version 4.0 allows you to add tags option to select control too.

So the solution is either you need to upgrade to the latest plugin or you need to bind select2 on input control.