How can I map a tag to an ID value with TagIt for jQuery?

Question

I found a lovely little tagging script called TagIt:

http://aehlke.github.io/tag-it/examples.html

It's really nice and simple, but I'm wondering how I can let the user type in tags (from my predefined taglist) and have them map to an actual ID number, rather than the tag name itself?

On form submission, I'd like to be able to submit a list of ID's like so:

3,7,22,56,77

Which would map to tags the users has selected, like:

rock,indie,blues,jazz,world

My tags will come from a table of tags, each with their primary key, and it is these primary keys that I wish to store in the column of the post, the user is creating.

Basically, I want the user to see the nice names of the tags, but for the form to actually submit ID value's. Is this possible?

Here is my current JS:

var genreTags = [

    'Indie',
    'Electronic',
    'Pop',
    'Urban',
    'Metal',
    'Jazz',
    'Blues',
    'World',
    'Rock',
    'Classical',
    'Reggae'

];

$("#genre").tagit({
    availableTags: genreTags,
    tagLimit: 3
});

It's a simple list of word tags, but I guess these would need to be objects. Something like:

{ "id" : "3", "name" : "rock" }

Is it possible to do something like this, then use the ID as the value to place in the form field?

Any help appreciated.

Thanks, Michael.

Answer 1

It is possible to have label and id pairs and integrate it with TagIt.

Since, the list is predefined you can declare id-label pairs.

var availableTags = [
{value: 1, label: 'tag1'},
{value: 2, label: 'tag2'},
{value: 3, label: 'tag3'}];

This jsfiddle will give you an idea.