Key and value in tag?

[Goldjan]

Is it possible to save a key and value here?

Possible data structure:

var countries = [
  ['Germany', 'de'],
  ['USA', 'us'],
  ['Spain', 'es']
];

I want this:

<li class="taggle ">
  <span class="taggle_text">Germany</span>
  <button class="close" type="button">×</button>
  <input type="hidden" value="de" name="taggles[]">
</li>

[okcoker]

You can do something like this:

var countries = [
  ['Germany', 'de'],
  ['USA', 'us'],
  ['Spain', 'es']
];

var map = countries.reduce(function(acc, pair) {
    var code = pair[1];
    var country = pair[0];
    
    acc[code] = country;
    
    return acc;
}, {});

var example = new Taggle('example1', {
    tags: Object.keys(map),
    tagFormatter: function(li) {
    	var text = li.querySelector('.taggle_text');
        var displayText = map[text.textContent];
        
        text.textContent = displayText;
    	
        return li;
    }
});

Demo here.

I do like the idea of being able to edit the input value a bit easier though so I'll leave this issue open.