Insignia

Enter a space-separated list of tags:

      
insignia(input);

Enter a list of tags using a custom delimiter:

      
insignia(input, {
  delimiter: ','
});

If you want, you can allow humans to remove tags by clicking on the crosses.

      
insignia(input, {
  deletion: true
});

Default values are naturally welcome.

      
insignia(input);

Sometimes we need to transform tags:

      
insignia(input, {
  getText: function (value) {
    return value.toUpperCase();
  }
});

Duplicates are okay sometimes:

      
insignia(input, {
  validate: function (value, tags) {
    return true;
  }
});

Sometimes we need to do both!

      
insignia(input, {
  getText: function (value) {
    return value.toUpperCase();
  },
  validate: function (value, tags) {
    return true;
  }
});

Really long lists behave reasonably well, too.

      
insignia(input);

Messing with the instance barely scratches the experience.

      
var tagInput = insignia(input);

// insignia.find(input) also returns tagInput

toggle.addEventListener('click', function () {
  if (tagInput.destroyed) {
    tagInput = insignia(input);
  } else {
    tagInput.destroy();
  }
});

You can write a custom event handler to accept new tags on Enter: _{(but we wouldn't endorse doing that in forms, as it'd break the default submit behavior!)}

      
var tagInput = insignia(input);

input.addEventListener('keypress', function (e) {
  if (e.keyCode === 13) {
    tagInput.refresh();
    e.preventDefault(); // prevent form submission
  }
});

Insignia

Customizable tag input. Progressive. No non-sense!

Get it on GitHub! bevacqua/insignia