SELECT2 -> Add data without replacing content

Question

I've had a look at some other threads but nothing quite as specific. It's not really something that I would assume is hard but I'm not sure how about to do it.

Currently I'm using Select2 for a tagging system and next to it I have suggested tags which users would be able to click on and it will add to the box.

Instead, each tag is replacing the content and adding itself.

I need the adding to be appended into the box without replacing what's already in there.

Here's my code:

$(document).on('click', ".tag1", function () {
      var value = $(".tag1").html();
      console.log(value);
      $("#selectPretty").val([value]).trigger("change");
});
$(document).on('click', ".tag2", function () {
      var value = $(".tag2").html();
      console.log(value);
      $("#selectPretty").val([value]).trigger("change");
});

The data is being pulled through via AJAX with a span around each suggested tag.

Hope I'm clear enough.

Summary: I want to be able to click on each 'tag' and for it to be added, instead it replaces what was already in the box.

Thanks

Solution 1

You should be able to do that with simple:

var test = $('#test');

$(test).select2({
    data:[
        {id:0,text:"enhancement"},
        {id:1,text:"bug"},
        {id:2,text:"duplicate"},
        {id:3,text:"invalid"},
        {id:4,text:"wontfix"}
    ],
    multiple: true,
    width: "300px"
});
var data = $(test).select2('data');
data.push({id:5,text:"fixed"});
$(test).select2("data", data, true); // true means that select2 should be refreshed

Working example: http://jsfiddle.net/z96Ca/

Solution 2

You are replacing the value with val(mystuff). You want to do the following:

1. Get the current data in the input with val()

   var dataOld = $('#selectPretty').val();

2. Append the new data with something like*

   var dataNew = dataOld.push(value);

3. Set the input data to new data:

   $('#selectPretty').val(dataNew);

*This assumes that val() returns an array

Docs

Comments

[Jack]

Hi Tomanow! Really appreciate your help with this. I seem to be getting an error in my console for the push method: Uncaught TypeError: Object #<Object> has no method 'push'

[Tomanow]

Okay it appears data() returns an object, not an array. If you console.log(dataOld); what does it say?

[Jack]

Object {select2: constructor, select2ChangeTriggered: false} select2: constructor select2ChangeTriggered: false proto: Object

[Tomanow]

Updated my answer, try that.

[Jack]

I'm now receiving this error when a tag is in the textbox aready (tagText is a tag in the box beforehand) Uncaught TypeError: Object tagText has no method 'push' - Thanks again for your help with this. Appreciate it.

[Tomanow]

Are you making sure to push an object into the array? value will be something like {id: 2, text: 'foo'}

[Jack]

Thanks a lot for your help, Tomanow! I used your help and Goran's. Really appreciate it :)

[Jack]

Thanks a lot, the last three lines worked perfectly when passed through to my code!