jQuery Plugins by Fredi Bach: InputNotes, AutoAnchors, RandomClass, RemoveOverflow, aPartHide, TabSelect, DefaultsTagger, SelectSwitcher, LivingFade, SlideInReplace, WaveAnimate, jKit (external)

DefaultsTagger jQuery Plugin

A plugin to generate clickable default tags to populate a textfield that can contain additional non-default tags.

Demo Usage Styling Download Compatibility Changelog

Demo

Below is a demo of the plugin with default settings. You can click on the default tags to populate the textfield. Additionaly, you can add more non-default tags by simple typing them into the textfield. By default, the plugin removes the spaces around the commas, but you can switch that feature off if you want:

As you can see, the selected default tags are highlighted and they get removed from the textfield as you click on them a second time. If you remove the default tags inside the textfield manually, they become non-highlighted automactically.

Usage

This is how we called the plugin for the demo above:

$('#tags').defaultsTagger({
  defaultTags: [ 'Schnee', 'Winter', 'Sommer', 'Sonne', 'Strand', 'Meer' ]
});

Simple and straight forward. The example below shows the same thing with all the default settings:

$('#tags').defaultsTagger({
  defaultTags: [ 'Schnee', 'Winter', 'Sommer', 'Sonne', 'Strand', 'Meer' ],
  tagContainerClass: 'defaulttags',
  title: '<strong>Defaults:</strong> ',
  tagSeparator: ',',
  removeSeparatorWhitespace: true,
  containerElementType: 'div',
  tagElementType: 'span',
  onChange: function() {}
});

Styling

You're completely free to style your elements. Default settings for the tag elements is a span element and a div for the tag container, but you can change that in the settings. Here's the styling I used for the demo:

div.demo {
	color: #999;
	font-size: 10px;
	margin-top: 3px;
}
div.demo input {
	width: 98%;
	padding: 4px;
	font-size: 12px;
}
div.demo strong {
	margin-right: 8px;
	margin-left: 7px;
}
div.demo span {
	margin-right: 8px;
	cursor: pointer;
	cursor: hand;
}
div.demo span.active {
	color: #000;
}

Download

Current version: jquery.defaultstagger-0.2.js (3.8k not minified)

Compatibility

Tested in:

With:

There really is nothing complicated in there, so expect the plugin to work in older browsers as well.

Changelog