How to initSelection() on a tag list of id/label pairs?

[Ben]

I'm initialising a Select2 tag list as follows:

<input type="text" name="users" value="" id="users" class="span3" /> $("#users").select2({ tags : [ {'id':1, 'text':'Ben'}, {'id':22, 'text':'Andrea'}, {'id':23, 'text':'Tim'}, {'id':7, 'text':'Matt'} ] ,tokenSeparators : [",", " "] }).on('change', function(event){ console.log(event.val.toString()); });

... which works a treat, when the input box is empty to begin with. Selecting people by name gives me back a simple array of ID's that I can send back to the database.

However, I'm confused about how I should initialise this list with an existing selection. Let's say I load the page with Ben and Andrea already selected:

<input type="text" name="users" value="Ben, Andrea" id="users" class="span3" />

I can see that Select2 has an initSelection() method, but I'm unsure how I'd use it. Obviously the example above is wrong, as I'm not passing the ID along with the person name - but how *should* I be passing that data in? And what should my implementation of the initSelection callback function look like in order to correctly initialise Select2 from it?

Thanks,

Ben

[Todd]

This

<input type="text" name="users" value="Ben, Andrea" id="users" class="span3" />

Should be:

<input type="text" name="users" value="1, 22" id="users" class="span3" />

Preloading example:

<script>

var tags = [ {'id':1, 'text':'Ben'}, {'id':22, 'text':'Andrea'} ];

// preload data

$("#users").select2('data',tags);

</script>

--
You received this message because you are subscribed to the Google Groups "select2" group.
To view this discussion on the web visit https://groups.google.com/d/msg/select2/-/UFBfLPt7Oq4J.
To post to this group, send email to sel...@googlegroups.com.
To unsubscribe from this group, send email to select2+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/select2?hl=en.

[Ben]

Ok, problem solved. I didn't need the initSelection thing at all. I just needed to pass an array of IDs to the val() function, called after the select is initialised:

$("#users").select2({

tags: [

{'id':1, 'text':'Ben'}, 

{'id':22, 'text':'Andrea'}, 

{'id':23, 'text':'Tim'}, 

{'id':7, 'text':'Matt'}

]

,tokenSeparators : [",", " "]

})

.select2("val", [1,22])

.on('change', function(event){

    console.log(event.val.toString());

});

[Ben]

Ah, sorry - didn't see your reply before I posted mine. So you can do it directly via the input value, too - even easier! :)

[ninja....@gmail.com]

On Thursday, November 1, 2012 11:03:26 AM UTC-2, Todd wrote:
> This
> <input type="text" name="users" value="Ben, Andrea" id="users" class="span3" />
>
>
>
> Should be:
> <input type="text" name="users" value="1, 22" id="users" class="span3" />
>
>
>
>
>
> Preloading example:
> <script>
> var tags = [
> {'id':1, 'text':'Ben'},
> {'id':22, 'text':'Andrea'}
> ];
>
>
>
>
>

> // preload data$("#users").select2('data',tags);

Does this solution should work outside tagging mode? I would like to initialize select2 using this approach when using normal data instead of tags, but seems like it doesn't work.

[sheh]

This discussion highlights how thoughtful choices and simple solutions can improve everyday experiences for both people and their pets.The same idea applies to pet care, where small treats and positive interactions can help build trust and strengthen relationships.Resources like Churu connect naturally with this topic by offering enjoyable cat treats that add variety and comfort to a cat’s daily routine.