ioncache/tag-handler

Tag Handler is a jQuery plugin used for managing tag-type metadata.

jQuery Tag Handler v1.3.1 Copyright (C) 2010-2011 Mark Jubenville Mark Jubenville - [email protected] http://ioncache.github.com/Tag-Handler

Development time supported by: Raybec Communications http://www.raybec.com http://www.mysaleslink.com

Modified by Javier Fernandez Escribano - [email protected] Added autocomplete queries as the user writes

Development time supported by: Tourist Eye http://www.touristeye.com

Based heavily on: Tag it! by Levy Carneiro Jr (http://levycarneiro.com/) http://levycarneiro.com/projects/tag-it/example.html http://github.com/levycarneiro/tag-it http://plugins.jquery.com/project/tag-it

Tag icons/cursors converted from: From the famfamfam.com Silk icon set: http://www.famfamfam.com/lab/icons/silk/

Loader image created at: Preloaders.net http://preloaders.net/

---

Description

Tag Handler is a jQuery plugin used for managing tag-type metadata.

---

Basic Usage Instructions

• Tag Handler must be attached to one or more

  tags in your HTML.

  • To add a tag, click on the tag box, type in a name, and hit enter or comma.

  • Tags may be removed from the tag box by hitting backspace inside the box or by clicking on the tag.

  • The list of tags may be initialized in 1 of 3 ways:

    1. By passing arrays of tag names as options to the plugin ("availableTags" and "assignedTags"); or,

    2. By supplying a "getURL" for the tags to be retrieved via AJAX.

       When using this method, the server must supply a JSON formatted array named "availableTags" and optionally an additional array named "assignedTags".

    3. By supplying a "getURL" and initLoad: false.

       When using this method, it will get the "assignedTags" from the array as in method 1. When the user writes a tag, it will query the server searching for similar tags.

  Either way, the information from these 3 methods will be used in the following manner:

  availableTags: each item in this array will populate the autocomplete drop-down list

  assignedTags: each item this array will become a tag in the tag box

  • Tags may be sent back to the server by supplying an "updateURL". In this case, an array will be sent back to the server named "tags".

  • You can define whether the user can create new tags or select tags only.

  • You can define if the user can edit the tags.

  • A sample CSS file is included that can be used to help with formatting tags.

  ---

  Plugin Examples

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

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

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

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

  See https://ioncache.github.io/Tag-Handler/ for more examples

tag-handler's Issues

deleteURL Option

Hi,

Is it posibble to add a deleteURL Option to the Tag-Handler. I use the Tag-Handler with server-side scripting PHP&MySQL and I'd like to use a different URL for deleting tags. If there is a work around for this issue please share..

Any suggestion welcome,

Thank you

Support for Placeholder

Can you make something like placeholder that can help in indicating a user to enter the tags.

Support IDs instead of names

hi,

Is there a way to support IDs when submitting the form instead of the names? This would require returning a map of elements in the form of id/name to the autocomplete plugin, name for the end-user and ID for what gets submitted via the form.

Is this possible?

With onDelete present, tags don't get deleted

With the below code, the callback function for onDelete gets executed correctly, but the tags themselves don't get removed.

If I comment out the onDelete function, then they do get removed but obviously the callback function doesn't get executed.

$( document ).ready(function() {
    $('[type="checkbox"]').uniform();
    $('#search').tagHandler({
        availableTags: [ 'apple', 'orange', 'pear', 'banana', 'watermelon', 'mandarin', 'strawberry' ],
        autocomplete: true,
        onAdd: function(tag) { class_actions(tag,'add'); },
        onDelete: function(tag) { class_actions(tag,'remove'); }
    });
    function class_actions(tag,action) {
        var resources = $('.resources li');
        resources.each(function() {
            var keywords = $(this).data('keywords');
            if (keywords.indexOf(tag) >= 0) {
                if(action=='add') {
                    $(this).addClass('highlight');
                } else {
                    $(this).removeClass('highlight');
                }
            }
        });
    }
});

I'm using jQuery 1.7.1 and jQuery UI 1.8.16 (same as from your examples). Any idea what might be the cause of the problem?

Issue with Single quotes inside of items & update URL

80's 90's for example can not be removed.

When using data from JSON, the "80's 90's" item is removed but not passed to the update URL.

$("#edit_34").tagHandler({
getData: { category: '34' },
assignedTags: [ '80s', '80's', '80's 90's' ],
availableTags: [ '80s', '80's', '80's 90's' ,'rock','punk' ],
updateData: { category: '34' },
updateURL: '/api/saveTags.php',
autocomplete: true,
autoUpdate: true,
initLoad: true,
minChars: 2,
allowAdd: false
});

Add class to the Tag Input field when an invalid tag is typed

Have the TagHandler add a class to the input field whenever invalid tag data is entered.

Currently the only invalid tag data allowed is entering a duplicate tag. But if extra validation was added to the tag input then this would be more useful.

Tagfy on blur

Is possible create tag if i just focusout my input using the delimiter option?

Use $.data for storing tags instead of internal variable

Switch to using $.data to store the tag lists instead of using internal arrays.

This would allow for use of the tags outside the scope of the plugin if desired.

Auto serialize tags into a field and submit with parent form

Allow the TagHandler to store the serialized values of the tags when submitting a form.

Add some options:

• formID: ID of the form that the TagHandle will use to hijack the submit function and store the tag data in. If this field is left undefined but the fieldName option isset, then the TagHandler will use the parent form of the TagHandler.
• fieldID: ID/name of the input field to store the tag names in when submitting. This field could exist in the form already or be auto-created by the TagHandler on the fly.

"The 'charCode' property of a keydown event should not be used."

I'm getting this warning message in Firebug whenever I type something into Tag Handler:

The 'charCode' property of a keydown event should not be used. The value is meaningless.

Message me if you'd like more details or debugging help.

Same tags but in different capitalization.

Both "foo" and "Foo" can be added to the tag list. They should be threatened as the same word.

Option for case-sensitive/insensitive Tag matching

Add functionality to allow for case insensitive matching on tag names.

This would be for cases where you might not want to allow for 'duplicate' tags like: foo & FOO

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet.
We recommend using:

• CircleCI
• Travis CI
• Buildkite
• CodeShip
• Azure Pipelines
• TeamCity
• Buddy
• AppVeyor
  But Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.

assigned tags not working for Tag Handler by ioncache

I'm using this plugin called TagHandler. Link: http://ioncache.github.io/Tag-Handler here's the code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/jquery.taghandler.css" />
    <script type="text/javascript" src="js/jquery-3.1.1.js"></script>
    <script type="text/javascript" src="js/jquery.taghandler.js"></script>
    <title>tags</title>
</head>
<body>
<!--<div class="tagHandler">
    <ul id="basic_tag_handler" class="tagHandlerContainer">
    <li class="tagInput">
        <input class="tagInputField" type="text">
    </li>
    </ul>
</div>
-->
<div class="tagHandler">
    <ul id="array_tag_handler" class="tagHandlerContainer">
        <li class="tagInput">
            <input class="tagInputField ui-autocomplete-input" type="text" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
        </li>
    </ul>
</div>

<script>
   // $("#basic_tag_handler").tagHandler();
    $("#array_tag_handler").tagHandler({
        assignedTags: [ 'C', 'Perl', 'PHP' ],
        availableTags: [ 'C', 'C++', 'C#', 'Java', 'Perl', 'PHP', 'Python' ],
        autocomplete: true
    });

</script>
</body>
</html>

It is taking the values of assignedTags, The attribute availableTags opens a dropdown to select the specified values by availableTags as per website but in my case it is not opening the dropdown what can be the issue?

How can I pass values means id for delete tags from database.

Currently afterDelete:function(tag) passing like 'C', 'Perl', 'PHP'. How can I pass values like 1, 2, 3. Please help me. I need to pass values means id of assigned tags [ 'C', 'Perl', 'PHP' ] to delete data.

HTML special characters handled incorrectly in tag names.

If HTML special characters are used in a tag name, eg , Tag-Handler is interpreting them as HTML rather than text.

Fix is to change the reading/writing of the tags to use .text() instead of .html().

Callback functions when adding/removing tags

Include option to delete all tags?

Would it be possible to include an option to delete all tags in one go and maybe a callback option for after it happens to add/remove a class from the container?

Add/remove tags via API methods

Something like:

$("#tag_container").tagHandler().addTag("Perl");
$("#tag_container").tagHandler().removeTag("Perl");

Add regex validation to the tag input

Add option for a regex to be applied to the tag input for validating tag data.

API for disabling tag editing

Could be cool to be able to disable editing of tags through the plugin API.

e.g.

elem.tagHandler("disable");
elem.tagHandler("enable");

this would hide the input, and remove click callbacks on the tags elements.

Use case is that I want to activate editing with an "edit" button, then save/cancel modifications with some buttons as well.

jQuery error

using jquery 1.7.2 and jqueryUI when using the autocomplete option i keep getting the error

Error: cannot call methods on autocomplete prior to initialization; attempted to call method 'option'

Any ideas what would cause this? I made sure jquery and jqueryUI were loaded first but still no luck.

Possibly incorrect autocomplete option

jquery.taghandler-hacked.js:464: minLength: opts.minChars

The version of autocomplete I'm using seems to want minChars as well.

Perhaps this needs to change to:

minChars: opts.minChars
?

Is it possible to make it compatible with the fantastic bootstrap.js

I am trying to but I am not that good with CSS.
It would be fantastic to have it compatible with bootstrap.js

Add API method for retrieving a list of tags

Add a methods for getting an array of the tags or a serialized list of the tags

Something like:

$("#tag_container").tagHandler().getTags(");
$("#tag_container").tagHandler().getSerial();

The serialized tags would probably be something like a comma separated list.

dependencies

Hi,

could you perhaps list the exact dependencies somewhere? Specifically i would like to know, what parts of jquery ui are necessary for tag-handler to work, as i don't want to include all of the jquery ui stuff in my project. I figure, the autocomplete widget is necessary, but what are the other parts, that you can configure at http://jqueryui.com/download?

That would help. Thanks and cheers
Sven