Allowing select2 jquery ajax in tag mode to repeat tags

javascript, jquery, jquery-select2

Solution

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

Problem

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

Original source