Allowing select2 jquery ajax in tag mode to repeat tags

Question

I am using select2-jquery to bring several items from the server (ajax) and the allow the user to select several of them, it works fine but I cannot select any given tag more than once and that's a requirement I'll paste some of my code, hopefully it helps. I have inspected the ajax requests and i can see the same data getting back from the server under the same search terms, but once an item is selected the select2 does NOT displays it anymore

This is a part of my View:

<div class="form-group">
    @Html.LabelFor(m => m.Vals, T("Values"), new { @class = "control-label col-md-2" })
    <div class="col-md-7">
        <input id="Values" name="Values" type="hidden" style="width: 100%" data-url="@Url.Action("Action", "Controller")" />
    </div>
</div>

And this is the JS part:

$(function () {
        var fullTemplateString = 'some template string';
        var resultTemplateString = 'other template';
        var $selectInput = $('#Values');

        initilizeSelect2($selectInput, fullTemplateString, resultTemplateString);
    });

    function initilizeSelect2($selectInput, fullTemplate, resultTemplate) {
        $selectInput.select2({
            placeholder: "Select Labs",
            minimumInputLength: 2,
            multiple: true,
            tokenSeparators: [","],
            tags: false,
            ajax: {
                url: $selectInput.data('url'),
                dataType: 'json',
                quietMillis: 250,
                data: function(term, page) {
                    return {
                        term: term,
                    };
                },
                results: function(data, page) {
                    return {
                        results: data
                    };
                }
            },
            formatSelection: function (item) {
                return format(item, resultTemplate);
            },
            formatResult: function (item) {
                return format(item, fullTemplate);
            },
            escapeMarkup: function (m) { return m; }
        });
    }

    function format(item, templateString) {
        var result = templateString
            .replace(/\^\^id\^\^/g, item.id)
            .replace(/\^\^icon\^\^/g, item.icon)
            .replace(/\^\^text\^\^/g, item.name)
            .replace(/\^\^desc\^\^/g, item.desc);

        return result;
    }

I am using select2 version:3.4.5 extensively in this project so any changes in this regard would be very painful

Thanks in advance

Answer 1

after a lot of search and debugging through the select2 code i found a way (hack) to pull this out by removing the css class .select2-selected that prevents already selected elements from displaying again. I know this isn't the best solution there is, but it is working now. I really welcome any improvements or better solutions