Default Usage

The Tag Handler will be initialized with no options and no default tags:

    $("#array_tag_handler").tagHandler();
    

Jquery UI Theme Usage

The Tag Handler will be initialized to use the JQuery UI Theme. Loaded theme: Smoothness

    $("#array_tag_handler").tagHandler({jqueryTheme: true});
    

Auto-complete

The Tag Handler will be initialized with preset tags from the assignedTags and availableTags arrays, and autocomplete witll be turned on:

    $("#example_autocomplete").tagHandler({
        assignedTags: [ 'C', 'Perl', 'PHP' ],
        availableTags: [ 'C', 'C++', 'C#', 'Java', 'Perl', 'PHP', 'Python' ],
        autocomplete: true
    });
    

Ajax

The Tag Handler will be initialized and pull data via ajax, also sending some data to the server:

    $("#example_ajaxinit").tagHandler({
        getData: { id: 'user123', type: 'user' },
        getURL: '/ajaxtest/get',
        autocomplete: true
    });
    

Ajax with Save

Same as the example above, but a different user is set in the getData/UpdateData options and now the tags will save when clicking the save button

    $("#example_ajax_with_save").tagHandler({
        getData: { id: 'user234', type: 'user' },
        getURL: '/ajaxtest/get',
        updateData: { id: 'user234', type: 'user' },
        updateURL: '/ajaxtest/update',
        autocomplete: true
    });
    

Ajax with Auto Update

Same as the example above, but autoUpdate is true, tags will save automatically (no save button will be shown)

    $("#example_ajax_with_auto_update").tagHandler({
        getData: { id: 'user234', type: 'user' },
        getURL: '/ajaxtest/get',
        updateData: { id: 'user234', type: 'user' },
        updateURL: '/ajaxtest/update',
        autocomplete: true,
        autoUpdate: true
    });
    

Ajax load tags on demand

The Tag Handler will be initialized but it will request the tag list when the user writes more than 2 chars (try typing in a mixed drink name for this example):

    $("#example_ajax_on_demand").tagHandler({
        getData: { id: 'user345', type: 'user' },
        getURL: '/ajaxtest/search',
        autocomplete: true,
        initLoad: false,
        minChars: 2
    });
    

Prevent Adding New Tags

Adding allowAdd: false will prevent the user from being able to add new tags.

    $("#example_prevent_add_new").tagHandler({
        assignedTags: [ 'C', 'Perl', 'PHP' ],
        availableTags: [ 'C', 'C++', 'C#', 'Java', 'Perl', 'PHP', 'Python' ],
        autocomplete: true,
        allowAdd: false
    });
    

Using Add and Delete Callbacks

The following example shows how to use add and delete callbacks. A call back returning false will stop the default process.

    $("#example_with_callbacks").tagHandler({
        assignedTags: [ 'C', 'Perl', 'PHP' ],
        availableTags: [ 'C', 'C++', 'C#', 'Java', 'Perl', 'PHP', 'Python' ],
        autocomplete: true,
        onAdd: function(tag) { alert('Added tag: ' + tag); },
        onDelete: function(tag) { alert('Deleted tag: ' + tag); }
    });
    

Using a custom tag validator

The following example shows how to can pass in your own validation checks. This check is a callback that must return true if the tag is valid, or false if the tag fails inspection. The validator in this example uses regex to validate that only numbers are added to the tags.

    $("#example_with_custom_validator").tagHandler({
        onIsValid: function(newTag) {
            if (/^[0-9]+$/.test(newTag)) {
                alert("Tag Passed!");
                return true;
            }
            alert("This new tag is not a valid number entered: "+newTag);
            return false;
        }
    });
    

Using the afterLoad Call Handler

The following example shows how to can pass in your own init callback. This call will be called after the tagHandler is loaded.

    $("#example_with_after_load_callback").tagHandler({
        afterLoad : function() { alert("TagHandeler Loaded!") }
    });
    

Setting maximum number of tags

The following example shows how to set the maximum number of allowed tags

    $("#example_with_maximum").tagHandler({
        assignedTags: [ 'Perl' ],
        availableTags: [ 'C', 'C++', 'C#', 'Java', 'Perl', 'PHP', 'Python' ],
        autocomplete: true,
        maxTags:5
    });
    

$("#some_selector).tagHandler('getTags')

Click on the button "Get Tags" to show an alert of active tags

    var tags = $("#some_selector).tagHandler('getTags');

    /* Do something with tags array */
    alert(tags.join(,));
    

$("#some_selector).tagHandler('getSerializedTags')

Click on the button "Get Serialized Tags" to show an alert of active tags

    var tags = $("#some_selector).tagHandler('getSerializedTags');

    /* Do something with tags array */
    alert(tags);
    

$("#some_selector).tagHandler('getOptions')

Click on the button "Get Options" to show an alert of all tags available

    var tags = $("#some_selector).tagHandler('getOptions');

    /* Do something with tags array */
    alert(tags.join(,));
    

$("#some_selector).tagHandler('getSerializedOptions')

Click on the button "Get Serialized Options" to show an alert of all tags available

    var tags = $("#some_selector).tagHandler('getSerializedOptions');

    /* Do something with tags array */
    alert(tags);
    

$("#some_selector).tagHandler('addTag', 'New Tag')

Click on the button "Add Tag" to add a tag to the tag handler

    $("#some_selector).tagHandler('addTag', 'New Tag');
    

$("#some_selector).tagHandler('addOption', 'New Tag')

Click on the button "Add Option" to add a tag to the list of available tags

    $("#some_selector).tagHandler('addOption', 'New Tag');
    

$("#some_selector).tagHandler('destroy')

Destroy an active tag handler and return it to its original state

    $("#some_selector).tagHandler('addOption', 'New Tag');
    

• Initial State

$("#some_selector).tagHandler('reload')

Restart the tag handler. Make some changes and hit the Reload button to restore to it's original state. This function will also make the ajax calls to re-initialize the tag handler as well. Note: All unsaved changes will be lost!

    $("#some_selector).tagHandler('reload');