Select2 - avoiding duplicates tags

Question

How can I avoiding duplicates tags in Select2 input?

When I type tag name on the keyboard string is added to input field, but when I select tag from dropdown list (results from the database) the id is added to input (look at console.log on screenshot). So I can select tag from list and add the same tag from keyboard.

Moreover, I need the text of tags, not id from dropdown list while submit a form.

Full resolution

HTML:

<input type="hidden" id="categories" name="categories" style="width:100%" value="${categories}">

JS:

$("#categories").select2({
    tags: true,
    tokenSeparators: [","],
    placeholder: "Dodaj",
    multiple: false,
    minimumInputLength: 3,
    maximumInputLength: 50,
    maximumSelectionSize: 20,
    ajax: {
        quietMillis: 150,
        url: '${request.route_url("select2")}',
        dataType: 'json',
        data: function (term, page) {
            return {
                q: term,
                page_limit: 10,
                page: page,
            };
        },
        results: function (data, page) {
            var more = (page * 10) < data.total;
            return {results: data.categories, more: more};
        }
    },
    initSelection: function (element, callback) {
        var data = [];
        $(element.val().split(",")).each(function () {
            data.push({id: this, text: this});
        });
        callback(data);
    },
    createSearchChoice: function (term) {
        return { id: term, text: term };
    },
}).change(function (e) {
    if (e.added) {
        console.log($("#categories").val())
        console.log(e)
    }
});

Answer 1

Have same problem, but I figured it out to find a way around. I'm getting text and ids, but on the server side I'm creating from given id new objects, which are well read.

$tagsArray = explode(',', $tagNames); // it contains of my input select2 value (with ids)

foreach ($tagsArray as $tag)
{
    if (is_numeric($tag))
    {
         $tags->append(TagQuery::create()->filterById($tag)->findOneOrCreate());
    }
    elseif (!empty($tag))
    {
         $tags->append(TagQuery::create()->filterByName($tag)->findOneOrCreate());
    }
}

Hope it helps.

Answer 2

at first use select 2

and then do this:

$("select").change(function() {     var tr = $(this).closest("tr");
    tr.find("select option").attr("disabled",""); //enable everything

 //collect the values from selected;
 var  arr = $.map
 (
    tr.find("select option:selected"), function(n)
     {
          return n.value;
      }
  );

//disable elements
tr.find("select option").filter(function()
{

    return $.inArray($(this).val(),arr)>-1; //if value is in the array of selected values
 }).attr("disabled","disabled");   });