CODEWITHSUNDEEP
javascriptjqueryjquery-select2
charlie
charlie

Reputation: 481

Allow tags in Select2 elements

I have tried to enabled tags on select2 elements when they have a specific class

$(".select2Tags").each(function(index, element) {
    $(this).select2({
        tags: true
    });
});

But allowing new tags is not working. How can I make that work?

Upvotes: 5

Views: 12947

Answers (3)

Lucas Ayala
Lucas Ayala

Reputation: 2409

Maybe you forgot to set multiple attribute to the select element?

$(".select2Tags").each(function(index, element) {
  $(this).select2({
    tags: true,
    width: "100%" // just for stack-snippet to show properly
  });
});
<!DOCTYPE html>
<html>

<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
</head>

<body>
  <select class="select2Tags" multiple="multiple">
    <option selected="selected">orange</option>
    <option>white</option>
    <option selected="selected">purple</option>
  </select>
</body>

</html>

Upvotes: 3

Shidersz
Shidersz

Reputation: 17190

From the documentation of the select2 plugin one can read:

In addition to a pre-populated menu of options, Select2 can dynamically create new options from text input by the user in the search box. This feature is called "tagging". To enable tagging, set the tags option to true.

And

Note that when tagging is enabled the user can select from the pre-existing options or create a new option by picking the first choice, which is what the user has typed into the search box so far.

First, you can check next basic examples of how to use this feature. If a select2 have the tags option enabled, it will let you create a new temporary tag using the search box. When you create a new tag, and after that, you select a new option, the previous created tag will disappear since they are not permanently added as a new option on the select.

Basic examples:

$(document).ready(function()
{
    // Initialize first select without using tags.

    $(".select2").select2(
    {
        placeholder: 'Select an option'
    });

    // Initialize second select with tags enabled.

    $(".select2tag").select2(
    {
        placeholder: 'Select an option',
        tags: true
    });

    // Initialize third select with tags and multiple options enabled.

    $(".select2tagMultiple").select2(
    {
        tags: true,
        multiple: true
    });
});
select {
    width: 90vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<h3>Select without tags:</h3>
<p>You are only able to select one of the available options</p>
<select class="select2">
  <option></option>
  <option value="FR">France</option>
  <option value="DE">Germany</option>
  <option value="IT">Italy</option>
  <option value="ES">Spain</option>
  <option value="BE">Belgium</option>
</select>
<br>

<h3>Select with tags enabled</h3>
<p>You can select from the pre-existing options or create a new option by picking the first choice, which is what the user has typed into the search box so far</p>
<select class="select2tag">
  <option></option>
  <option value="AR">Argentina</option>
  <option value="BR">Brazil</option>
  <option value="CL">Chile</option>
  <option value="CO">Colombia</option>
  <option value="UY">Uruguay</option>
</select>
<br>

<h3>Select with tags and the multiple option enabled</h3>
<p>You can select from the pre-existing options or create a new option by picking the first choice, which is what the user has typed into the search box so far. This also enables the possibility to create multiple tags.</p>
<select class="select2tagMultiple">
  <option value="D">Dog</option>
  <option value="C">Cat</option>
  <option value="B">Bird</option>
  <option value="H">Horse</option>
  <option value="F">Frog</option>
</select>

However, I can guess that none of the previous examples going to satisfy your question. For the poor redaction you have made, I assume what you want is 1) dynamically enable/disable the tags options or 2) a non-multiple select with the tags option enabled that let you add more than one new tag.

1) Approach for dynamically enable/disable tags.

If you need to enable/disable the tags options on the select dynamically, then just re-initialize the plugin as shown on the next snippet:

$(document).ready(function()
{
    // Initialize an standard select2.

    $(".select2").select2(
    {
        placeholder: 'Select an option'
    });

    // Register a listener on the change event of checkbox for
    // dynamically enable/disable the tags option.

    $("#cbTags").change(function()
    {
        var cfg = {
            placeholder: 'Select an option'
        };

        if ($(this).is(":checked"))
            cfg.tags = true;

        $(".select2tag").select2(cfg);
    });
});
select {
    width: 90vw;
}

.custom {
    margin-top: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<select class="select2 select2tag">
  <option></option>
  <option value="AR">Argentina</option>
  <option value="BR">Brazil</option>
  <option value="CL">Chile</option>
  <option value="CO">Colombia</option>
  <option value="UY">Uruguay</option>
</select>
<div class="custom">
  <label><b>Enable Tags</b></label>
  <input type="checkbox" id="cbTags">
</div>

2) Approach for enable multiple tags creation.

Bind a listener to the change event. The select2 plugin adds an attribute called data-select2-tag to the options that are created using the tags feature. These options are deleted when you change to other available option (i.e are temporaries). So, on every change event we going to delete those attributes to cheat the plugin an prevent it to delete. You can check the next code:

$(document).ready(function()
{
    // Initialize the select with tags enabled.

    $(".select2tag").select2(
    {
        placeholder: 'Select an option',
        tags: true
    });

    // Register a listener on the change event.

    $(".select2tag").change(function()
    {
        $(this).find("option").removeAttr("data-select2-tag");
    });
});
select {
    width: 90vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<select class="select2tag">
  <option></option>
  <option value="AR">Argentina</option>
  <option value="BR">Brazil</option>
  <option value="CL">Chile</option>
  <option value="CO">Colombia</option>
  <option value="UY">Uruguay</option>
</select>

Anyway, you should note that these new created tags will be only available on the client-side (without refreshing the browser). If you want to preserve these new tags into the server-side for future access, then you will need a better approach, like, for example:

(1) Capture a new tag on creation.

(2) Validate the tag name (you don't want to store all the user can write).

(3) If tag is valid, then send to the server and store on some structure (maybe a database).

(4) Reload the select with the new set of data.

But this will require much more code, and knowing details of your environment, so it is beyond the scope of this response.

Upvotes: -1

Mos&#232; Raguzzini
Mos&#232; Raguzzini

Reputation: 15851

This works as expected:

HTML

<select id="example" style="width: 300px">
    <option value="JAN">January</option>
    <option value="FEB">February</option>
    <option value="MAR">March</option>
    <option value="APR">April</option>
    <option value="MAY">May</option>
    <option value="JUN">June</option>
    <option value="JUL">July</option>
    <option value="AUG">August</option>
    <option value="SEP">September</option>
    <option value="OCT">October</option>
    <option value="NOV">November</option>
    <option value="DEC">December</option>
</select>
<button id="btnTest" />

</button>

JS

$('#example').select2({
    placeholder: 'Select a month'
});

$('#btnTest').on('click', function() {
    $('#example').select2({
         multiple: true,
         tags:true;
    });
})

Working snippet

https://jsfiddle.net/b6p3oycd/

Upvotes: 1

Related Questions