CODEWITHSUNDEEP
jqueryhtmljquery-select2
user3816152
user3816152

Reputation: 257

Tagging text in jquery select2

<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/

Upvotes: 3

Views: 1463

Answers (2)

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

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.

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388416

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" />

Upvotes: 4

Related Questions