jQuery Quicktag

Quicktag is a tagging plugin for the jQuery JavaScript library. What basically started as fun, ironically turned into a personal/college project, which then turned into a real plugin. You can find this plugin , where you'll be able to download its documentation, update to the newest version, or fork this project to make it better yourself. Thanks for stepping by!

You should follow me on twitter .

Configuration

The minimum amount of HTML is an input field and a div or ul with id="taglist".
The generated tags will be placed inside this, so called, taglist.

"text" id="taginput" />
"taglist">

The minimum amount of JavaScript is this little line here:

// Necessary JS
$('#taginput').quickTag();

Wasn't that hard, was it? Let's take this a bit further.

Settings

Quicktag comes with many options to choose from - a few of them might even go beyond the scope of this plugin. I'll try to explain everything as best as I can, but feel free to poke me on facebook if you have any questions... or just .

allowedTags | expects: integer / default: 5
This param sets the amount of tags the user is allowed to enter.

limitation | expects: integer / default: 30
Limitation is the maximum length of every tag. In my opinion, this is a good thing to have, since it reduces spam + keeps things clean.

counter | expects: object / default: undefined
Ever since I started using twitter, I really liked the feedback I got while entering a tweet. If you want to let the user know how many characters he has left, do this:

"counter">

// and pass it to Quicktag
$('#taginput').quickTag({
        counter : $('#counter')
});

notice | expects: object / undefined
Displaying messages is pretty much the same as above - just add a div and let Quicktag know about it. The only difference is that this div will be hidden first & only displayed once there are 'no more tags to give' *playslovesong*.

// Create a div and write whatever you want
"notice">Sorry, only 10 tags are allowed.

// pass it to Quicktag
$('#taginput').quickTag({
        notice          : $('#notice'),
        allowedTags     : 10,
});

fade | expects: integer / default: false
fade expects an integer (milliseconds) - when set, the error/notice won't just show up, it'll fade in instead.

focus | expects: boolean / default: false
Quicktag automatically refocuses the input field once you've deleted a tag, making it a lot quicker to use. If you don't like this, simply set it to false.

triggerKey | expects: integer / default: 13 (Enter)
triggerKey expects the keycode of the key that should add each tag. Default is the Enter key (13) and personally, I'd never change it. Here's still a list with all keycodes.

img | expects: string / default: undefined
Not liking the little 'x'? Too boring? Simply replace it with an image:

// Quicktag will no use delete_icon.png instead of an 'x'
$('#taginput').quickTag({
        img : 'pathtoimage/delete_icon.png'
});

coloring | expects: boolean / default: false
This one is also inspired by twitter. Setting coloring to true will apply colors at 'critical spots'. The default colors are yellow, orange, and red. As mentioned before, the default limitation is 50 - so if coloring is set to true, yellow will be applied at 25, orange at 15, and red at 10. This, of course, depends on the limitation - the 'color spots' are dynamically generated and depend on both the limitation and how many colors are passed inside the object.

// This will 'warn' the user at 50, 25, 15
// using the default colors yellow, orange, red
$('#taginput').quickTag({
        coloring : true
});

colors | expects: array / default: ['yellow', 'orange', 'red']
Here you'll be able to specify the colors you want Quicktag to be using. You could (hypothetically) pass as many colors as you want, just make sure it makes sense. How to find out whether or not passing many colors makes sense? Just do some quick math.
Let's say you have 6 colors and the limitation is 100 chars. Every color will be applied at the half of the limitations half (example follows, don't worry):

100 / 2 = 50                              // 1st color at 50 chars left
50 / 2      = 25                             // 2nd color at 25 chars left
25 / 2  = 12.5      (rounds to 15);          // 3rd color at 15 chars left
15 / 2  = 7.5       (rounds to 10);          // 4th color at 10 chars left
10 / 2      = 5                              // 5th color at 5  chars left
5 / 2       = 2.5   (rounds to 5!)           // 5th color again & forever
5 / 2       = 2.5   (rounds to 5!)           // 5th color again & forever
5 / 2       = 2.5   (rounds to 5!)           // 5th color again & forever
...

This means, passing more than 5 colors using a limitation of 100 chars wouldn't make sense - the last color would never be visible. I hope that made sense.

Colors need to be passed as an array, the first color is the 'least risky' one - the last one is the 'riskiest'. An example:

// Set limitation to 100 chars, enable coloring
// and pass dark yellow, dark orange, bright red & dark red
$('#taginput').quickTag({
        limitation      : 100,
        coloring        : true,
        colors          : ['#ffeb2f', '#ff8236', '#ff4120', '#cc341a']
});

isForm | expects: object / default: undefined
If your input field is anywhere inside a

// Your form
"nextpage.php" id="myform">
        // Here's the input field that uses Quicktag
        "taginput" />


// Pass the form to Quicktag so the Enter key doesn't submit the form
$('#taginput').quickTag({
        isForm : $('#myform')
});

tagClass | expects: string / default: 'tag'
Every tag comes with CSS class of 'tag'. This makes styling tags a lot easier.

closeClass | expects: string / default: 'close'
Same as tagClass, just for the little 'x' / image.

Demos

This demo allows only three tags with a max. of 50 characters each, has a counter & coloring (with 4 custom colors) enabled, uses image replacement for the close-link, has an error message that fades in and refocuses the input field. Type - when done, hit Enter.

Here's the code used in this demo, both HTML and JS:

"nextpage.php" id="myform">
        "text" id="taginput" />
        
"notice">Error message goes here.
        
"counter">


// JS
$('#taginput').quickTag({
        allowedTags     : 3,
        limitation      : 50,
        coloring        : true,
        colors          : ['#ffb4db', '#ff8ac7', '#ff62b3', '#ff0386'],
        img             : 'img/close.png',
        fade            : 300,
        focus           : true,
        notice          : $('#notice'),
        counter         : $('#counter'),
        isForm          : $('#myform')
});

Downloads

1. Minified Version
   (production purposes)

2. Regular Version
   (development purposes)

3. Documentation
   (both versions & doc)