Input TagsJS

Installation

• add InputTags.js and InputTags.css to your project files and import them in your HTML code:

  <script type="text/javascript" src="InputTags.js"></script>
  <link type="text/css" rel="stylesheet" href="InputTags.css" media="all" />

• create your tags <input> element within a <form>:

  <form>
  	<input type="text" id="input-tags-example" placeholder="Add new tags" />
  </form>

• initialize your tags <input>:

  InputTags.enable(
  	'input-tags-example', [
  		{id:1, className:'language', label:'HTML'},
  		{id:2, className:'language', label:'CSS'},
  		{id:3, className:'language', label:'JavaScript', alias:'js'},
  		{id:4, className:'language', label:'Python'},
  		/* ... */
  		{id:10, group:'Type', label:'Question'},
  		{id:11, group:'Type', label:'Bug'},
  		{id:12, group:'Type', label:'Duplicate', alias:'dupe'},
  		{id:13, group:'Type', label:'Feature request'}
  	]
  );

• customize style in InputTags.css

---

Documentation

InputTags object provides a single method to initialize a tags <input>:

• InputTags.enable(settings, knownTags [, customTags])

  Parameter settings

  an object that will define the tags <input> behaviour with these properties:

  element

  the id of the desired <input type="text"> (or the element itself) to be turned into a tags <input>

  name Optional

  form hidden field name for tags (default value: tags)

  maxTags Optional

  maximum number tags allowed to be added (default value is: 10)

  Parameter knownTags

  an array of objects containing information about your known tags, every object has these properties:

  id

  unique value for the tag

  label

  text that will appear in both the tag itself and the suggestions popover

  alias Optional

  string or array of strings for alternate searching

  group Optional

  if specified, only a single tag within the same group will be allowed to be added

  className Optional

  additional class for styling purposes

  Parameter customTags Optional

  if provided and true, user will be able to add custom tags (not defined in knownTags)

  it can be customized by providing an object with the following properties:

  name Optional

  form hidden field name for custom tags (default value is: tags_custom[])

  blacklist Optional

  a string or an array of strings of unallowed values in custom tags

  Return value

  an object with several methods:

  addTag(value[, label])

  add a tag by its value and optional label (if not provided, it will be the same as value)

  removeTag(value)

  remove a tag by its value

  removeTagByIndex(index)

  remove a tag by its index

  removeTags()

  remove all tags

  getCurrentTags()

  get an object with information about the current tags

  setKnownTags(knownTags)

  replaces the knownTags object defined during initialization with a new one (must follow the same object structure as the constructor)

  refresh()

  refresh the HTML elements, useful when the DOM has changed

---

License

This project is released under MIT license.