Creating a TagTrain

Constructor

let tagTrain = new TagTrain(Object opts)

Returns a new TagTrain object with the given options. Here are the valid options and their default values:

Options

{
    // keyCodes that, when pressed, will trigger the currently inputted text to be turned into a tag
    // Defaults to enter, tab, space, and comma
    delimiters: [9, 13, 32, 188],

    // keyCode that, when pressed with the cursor at the beginning of the input, will delete the last tag
    // Defaults to backspace
    removeLast: 8,

    // Regular expression that will reject a tag
    // Defaults to allowing alphanumeric characters and the underscore
    invalidTag: /\W/,

    // Maximum amount of characters allowed in a tag
    maxTagLen: Infinity,

    // Maximum amount of tags allowed
    maxTags: Infinity
}

Properties

• el: The DOM element representing the TagTrain. It should be added to the page to allow user interaction.
• opts: The actual options that are being used. May be modified directly.

Generated HTML structure

This information can be used for styling the TagTrain any way you please. However, it's best to stick to using only the class names because they are unlikely to change in future versions. See themes/default.css for a full example.

<div class="TagTrain-container">
    <ul class="TagTrain-tag-list">
        <li class="TagTrain-tag">
            <!-- tag value -->
            <span class="TagTrain-remove-btn"></span>
        </li>

        <!-- etc. -->
    </ul>
    <input class="TagTrain-input">
</div>