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.

103 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. jquery is something woderfull when it apply on a blog thanks for the tutorial … by BADUT

  21. Fabio says:

    amazing.. great plugin..

  22. 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’”….

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

  24. 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

  25. Pingback: 丰富网站的实用jquery插件 | W3Ccode

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

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

  28. 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

  29. Pingback: 40 Fresh jQuery Plugins for October 2011

  30. Pingback: 85 Best jQuery Plugins in 2011

  31. 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.

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

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

  34. azha says:

    how to get the value and pass to php and mysql

  35. azha says:

    nice plug works fine and great

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

  37. azha says:

    Can anyone help me how to load value from database

  38. The Sims 4 is the hugely anticipated daily life simulation game that
    lets you engage in with daily life like never ever just before.
    Develop new Sims with intelligence and emotion, whose every action is knowledgeable and affected by their interactions and psychological states.
    Knowledge all new intuitive and fun imaginative equipment.
    Sculpt your Sims in Produce A Sim and build
    exclusive houses with the tactile room-based mostly Build Mode.
    Manage the mind, physique, and coronary heart of your
    Sims with dynamic, emotion-prosperous gameplay, and deliver your
    tales to daily life.

  39. Pingback: 非常离不开的JQ插件!太全了! - WEB开发笔记

Leave a Reply

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