Tag Input

Examples

HTML

<div id="tag-input"></div>

JavaScript

var tagInput = new hx.TagInput('#tag-input')
tagInput.items(['tag-1', 'tag-2', 'tag-3'])

HTML

<div id="tag-input-2"></div>

JavaScript

var tagInput = new hx.TagInput('#tag-input-2', {
  classifier: function(value) {
    switch(value){
      case 'hello':
        return 'hx-positive'
      case 'goodbye':
        return 'hx-negative'
    }
  }
})
tagInput.add('hello', 'hx-positive')
tagInput.add('goodbye', 'hx-negative')
tagInput.add(['tag', 'tag2'])

HTML

<div id="autocomplete-example"></div>

JavaScript

var items = [
  {
    type: 'A',
    name: 'A Text'
  },
  {
    type: 'B',
    name: 'B Text'
  },
  {
    type: 'D',
    name: 'D Text'
  },
  {
    type: 'C',
    name: 'C Text'
  }
]

var ti = new hx.TagInput('#autocomplete-example', {
  autocompleteOptions: {
    renderer: function (elem, item) {
      hx.select(elem).text(item.name)
    },
    inputMap: function (item) { return item.name }
  },
  autocompleteData: function (term, cb) {
    // Remove duplicates and filter based on search term
    cb(items.filter(function (item) {
      return ti.items().indexOf(item.name) === -1 && item.name.indexOf(term) > -1
    }))
  }
})

Api

Change Log

Prototypes

hx.TagInputextendsEventEmitter

Initialises a tag input.

Constructors

hx.TagInputselectorString / HTMLElementoptionsObject

Arguments

selectorString / HTMLElement

A css selector that uniquely identifies the collapsible in the DOM.

options

The options to use when creating the tag input.

Properties

autocompleteDataArray / Function

The data to use as suggestions for the tag input. Data can be specified as an array of items or as a function that returns an array of items.

See

Autocompleteconstructor for more information about what the data can be set to.

By default, no autocompletion is provided.

autocompleteOptions

Special options to be passed to the autocomplete. See the Autocompleteconstructor for the available options.

classifiertagStringString

Provides a way to apply css classes to tags.

Arguments

tagString

The tag to classify

Returns

String

The css class to give a tag.

disabledBoolean

Whether the tag input should be disabled

Default: false

draggableBoolean

Whether the tags can be dragged and re-ordered.

Default: true

excludeTagsBoolean

Determines whether existing tags should be excluded from the autocompletion.

Default: true

itemsArray[String]

The array of tags to initialise the tag input with.

mustMatchAutocompleteBoolean

Determines whether the TagInput should only allow inputs that come from the autocomplete (if defined). Be default true.

placeholder

The placeholder for the input field when it has no text

Default: [hx.userFacingText('tagInput', 'placeholder')]

validatortagStringString

A function to prevent the user from adding certain tags.

// example: only allow non number inputs
new hx.TagInput('#validated-tag-input', {
  validator: function(name) {
    if (!isNaN(Number(name))){
      return "please enter text";
    }
  }
});