jQuery TagBox Plugin

After a long time we are back with another jQuery Plugin. This is a jQuery plugin to help add tags like input in your forms.
Demo: Click Here
Download: Click Here
Project Repository: Click Here

Usage:

  • In the header section add the following: 
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js"></script>
      <script type="text/javascript" src="http://jquery-tagbox.googlecode.com/hg/js/jquery.tagbox.js"></script>
      <script type="text/javascript">
        jQuery(function() {
          jQuery("#jquery-tagbox-text").tagBox();
          jQuery("#jquery-tagbox-select").tagBox({ 
            enableDropdown: true, 
            dropdownSource: function() {
              return jQuery("#jquery-tagbox-select-options");
            }
          });
        });
      </script>
  • Add your form elements like this: 
    <form action=".">
    <div class="row">
          <label for="jquery-tagbox-text">Text TagBox (Comma Separated)</label>
          <input id="jquery-tagbox-text" type="text" />
    </div><!--div.row-->
    <div class="row">
          <label for="jquery-tagbox-select">Dropdown TagBox</label>
          <select id="jquery-tagbox-select-options">
            <option value="jQuery">jQuery</option>
            <option value="MooTools">MooTools</option>
            <option value="ProtoType">ProtoType</option>
            <option value="Scriptaculous">Scriptaculous</option>
            <option value="Dojo">Dojo</option>
          </select><!--select#-->
          <input id="jquery-tagbox-select" type="text" />
    </div><!--div.row-->
    </form>

Advanced Options:

  • “separator” – This can be used to define the separator to be used to delimit the tags (Default: ‘,’)
  • “className” – Used to set the tag-box class name (Default: tagBox)
  • “tagInputClassName” – Used to set the class name of the tag input box (Default: ”)
  • “tagButtonClassName” – Used to set the class name of the tag button (Default: ”)
  • “tagButtonTitle” - Defines the title of the “Add Tag” button (Default: ‘Add Tag’)
  • “confirmRemoval” - Defines whether removal of tags requires confirmation dialog (Default: ‘false’)
  • “confirmRemovalText” – The text in the confirmationRemoval dialog (Default: ‘Do you really want to remove the tag?’)
  • “completeOnSeparator” – Defines whether tags are added when separator is input (Default: ‘true’)
  • “completeOnBlur” – Defines whether to add the tags when we blur from the tag input (Default: ‘false’)
  • “readonly” – Defines whether tag-box is readonly (Default: ‘false’)

New Options added in version 1.0.1

  • “enableDropdown” – Used to enable drop-down selection in the tag inpu (Default: ‘false’)
  • “dropdownSource” - Returns the source for the tag box drop-down selector could be a jQuery object or JSON of the form {“key”:”value”} (Default: function(){})
  • “removeTagText” - Defines the text inside the remove tag link (Default: ‘X’)
  • “maxTags” - Defines the maximum number of tags to be added (Default: ‘-1′ i.e. unlimited)
  • “maxTagsErr” - Callback to display error message when maxTags are reached (Default: ‘function(max_tags) { alert(“A maximum of “+max_tags+” tags can be added!”); }’)
  • “beforeTagAdd” - Callback executed before a tag is added (Default: ‘function(tag_to_add) {}’)
  • “afterTagAdd” - Callback executed after a tag is added (Default: ‘function(added_tag) {}’)

If you liked the plugin do not forget to share it on facebook, rate it and retweet it.

This entry was posted in Javascript, jQuery Plugins, Programming and tagged , , , , . Bookmark the permalink.

98 Responses to jQuery TagBox Plugin

  1. Pingback: 16 Fresh and Functional jQuery Plugins You will Love | free

  2. Pingback: 10 Best jQuery Plugins Of January 2012 | Techno Tab

  3. Pingback: 1webdesigner.net

  4. Pingback: 40款非常有用的 jQuery 插件推荐(一) | CSSwang-CSS网站

  5. Pingback: Os 50 mais úteis plugins jQuery | Site para Empresas – Blog sobre Internet e Criação de Site

  6. Jonam says:

    i like your plugin!

    how can i manually add tags in javascript?

  7. Pingback: 10 Best jQuery Plugins @ Effy的博客

  8. Pingback: 45 پلاگین جی کوئری مفید و رایگان برای سایت شما | Pixran

  9. Pingback: 40 Plugins jQuery gratuítos | 2puntos2barras

  10. Pingback: 14 Newly – Developed JQuery Plugins Of 2012 | Smashing Spy

  11. Pingback: 10 Best jQuery Plugins @ dodo糯

  12. Pingback: 50+ Useful Free jQuery Plugins to Enrich Your Site’s User Experience « Freebies « Creative Cartels A Creative Design & Branding Studio

  13. Pingback: 2012最新JQuery插件 - 酷吧

  14. Pingback: Cool and crazy jQuery plugins

  15. ibnu says:

    It’s wonderfull jquery-tagbox-plugin, i will tray it to my site, i hope can run well easily.
    Thank you

  16. Fahad says:

    How to make tags case insensitive? Just to make sure same tag cannot be entered using different case?

  17. Pingback: 20 usefull and free jQuery plugins | Alexandra Budeanu's Blog

  18. Pingback: Most practical instances of jQuery plugin demo download Web Page Design | Web Page Design Templates | Html5 Template

  19. Pingback: Captain-HTML – jQuery TagBox Plugin

  20. Fabio says:

    amazing.. great plugin..

  21. Fabio says:

    Hi, i’m back… i include a function for load tags..


    // Include tags
    pre_include_tags();

    function pre_include_tags() {
    jQuery.each($tag_input_elem.find(‘option[disabled="disabled"]‘), function(key, val) {
    add_tag(val.value);
    });
    }

    then, only set option “disabled=’disabled’”….

  22. Pingback: 40 jQuery Eklentisi | Herşeyden Yeteri Kadar

  23. Pingback: 80 Plugins úteis jQuery para enriquecer a experiência do usuário do seu site – Site para Empresas – Blog sobre Internet e Criação de Site

  24. Pingback: Useful (Free) jQuery Plugins to Enrich Your Site’s User Experience | W3Ccode

  25. Pingback: 40 Fresh jQuery Plugins for October 2011Wordpress Developent Websoite

  26. Dominik says:

    I have problem with retrieving already chosen and saved tags from database (tag_id) and display them on site. Could somebody tell me what jQuery method should I use or how to do it?
    Here is what I do:
    1. Open products page and “Add” tag/s
    2. Submit form and my chosen tags are being nicely saved to database by their id.
    3. I go back (edit) product and I would like to see already saved tags(blue icons).
    I am using Ruby On Rails and I have problem with jQuery. I just don’t know how to display them by tag_id.
    I would appreciate any help.
    Dominik

  27. Pingback: 40 Fresh jQuery Plugins for October 2011

  28. Pingback: 85 Best jQuery Plugins in 2011

  29. Fabio says:

    update:
    function “live()” is deprecated in jquery 1.7+… (http://api.jquery.com/live/)

    rewrite…
    jQuery(‘.’+options.className+’-remove-’+uuid).live( “click”, function () { // in line 131

    jQuery( document ).on( “click”, ‘.’+options.className+’-remove-’+uuid , function() {

    thanks, great work.

  30. Pingback: Create wordpress like add tags with JQuery, HTML and CSS - WSnippets

  31. Pingback: Create wordpress like add tags with JQuery, HTML and CSS | w3digest.com

  32. azha says:

    how to get the value and pass to php and mysql

  33. azha says:

    nice plug works fine and great

  34. azha says:

    Can anyone help me how to load value from database

  35. Scout says:

    hello, i want to know how to load tags from a value in a variable :) thanks

Leave a Reply

Your email address will not be published. Required fields are marked *