Select2 multiselect duplicates values

Question

http://jsfiddle.net/tXFbk/2/

HTML:

<div class="control-group">
    <label for="some_id" class="control-label">Some ID</label>
    <div class="controls">
        <input type="text" id="some_id" name="some_id" class="span4"/>
    </div>
</div>

JS:

$(function() {
    $('#some_id').select2({
        allowClear: true,
        placeholder: 'Some ID',
        minimumInputLength: 2,
        multiple: true,
        data: [
            {id: 1, text: 'some text'},
            {id: 2, text: 'some other text'},
            {id: 3, text: 'some more text'}
        ]
    });
    $('#some_id').select2('data', [
        {'id':1,'text':'some text'}
    ]);

    console.log($('#some_id').select2('val'));
});

On first load it duplicates values and after clearing value it doesn't clear it from input. Also if you add an item (eg. "some more text") and then remove it, it doesn't clear it from input value. Is there any way to make it stop duplicating values? One more thing - how to disable adding already added items?

Impetuous

Did you ever find an answer to this? – Exuberate

Answer 1

Select2 4.0.0 support duplicate tags.

Jsfiddle Demo link

$eventSelect.on("select2:select", function (e) { 
    log("select2:select", e);
  $eventSelect.append('<option value="'+e.params.data.text+'">' +e.params.data.text + '</option>');
});

$eventSelect.on("select2:unselect", function (e) { 
    log("select2:unselect", e); 
    e.params.data.element.remove();
});

function formatResultData (data) {
  if (!data.id) return data.text;
  if (data.element.selected) return
  return data.text;
};

Base on select2 event and github issues

Pic:

Tarttan

Got reordering issue with your example. Selecting "red,red,green", getting "red,green,red" – Mechelle

Answer 2

Check the following On Selecting event, and setting the isNew property in createSearchChoice

let me know if it resolved your issue

$('#some_id').select2({
            tags: true,
            tokenSeparators: [","],
            createSearchChoice: function (term, data) {
                if (term.trim().length > 0) {
                    if ($(data).filter(function () {
                      return this.text.toLowerCase().localeCompare(term.toLowerCase()) === 0;
                    }).length === 0) {
                        return {
                            id: term,
                            text: term,
                            isNew: true // this is necessary to check if the item is newly added or not
                        };
                    }
                }
            },
            multiple: true,
            minimumInputLength: 1,
            allowClear: true,
            data: [
        {id: 1, text: 'some text'},
        {id: 2, text: 'some other text'},
        {id: 3, text: 'some more text'}
    ],
        }).on("select2-selecting", function (e) {
            var tagId = '';
            if (e.choice.isNew) {
                self.AddTagToDatabase(e.choice.text);
            } else {
                var isValidTag = true;
                $(config.element[0] + ' ul li').find('div').each(function (index, item) {
                    if ($(item).html().toLowerCase().trim() == e.choice.text.toLowerCase().trim()) {
                        isValidTag = false;
                        e.choice.text = '';
                        return;
                    }
                });
            }
        })

Montserrat

Answer 3

You need to trigger the change event of select2 to reflect the changes.

$("#dropdownId").val("yourValues").trigger("change");

after setting the values, you need to fire trigger values manually, to reflect the latest changes done in your dropdownlist

Revocation

Answer 4

Based on above answer by NSDont, to solve the reorder issue, we can rearrange the options after each selection event, that is:

$eventSelect.on("select2:select", function (e) { 
    log("select2:select", e);

    //rearrange options here:
    $eventSelect.find('option').each(function () {  
        if (!this.selected){
            $(this).appendTo($eventSelect);
        }
    });
    //end rearrange

    $eventSelect.append('<option value="'+e.params.data.text+'">' +e.params.data.text + '</option>');
});

check on jsfiddle

Ange