Tagify is a simple Prototype based script, which allows you to input tags and give the user a visual feedback. If you have questions or feedback feel free to comment on this blog post: Tagify - a tagging interface
Just try it out:
Type in your tags separated by comma. Remove them with a click on the X-Button or use backspace.
Type in your tags separated by comma:
Type in your tags separated by comma, semicolon or space. The Tags that are already visible are automatically parsed out of the input's value attribute.
Tagfiy requires the JavaScript framework Prototype. If you want to use effects you also need script.aculo.us. You can grab it here and here or include it directly via the Google AJAX Libraries API. Tagify uses CSS for styling the input element for your tags so you need to include the css-file which is included in the download. Upload the image for the remove button. All you have to do now is to include the JavaScript and CSS files. If you have other paths or want other images: check the image paths in the tagify.css file.
It's as simple as this:
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js'></script> <script type='text/javascript' src='/tagify/tagify.js'></script> <link rel="stylesheet" type="text/css" href="/tagify/tagify.css" />
If you don't want to load an exta Stylesheet you could simply copy the contents of /tagify/tagify.css to your default css-file.
Usage is really simple. If you use the defaults provided by Tagify all you have to do is this simple call:
new Tagify('id_of_your_input_element');
Tagify has some options, they are all listed below with their defaul values:
new Tagify('id', {
splitBy: ",", // String of seperators for tags
duplicates: true, // allow or disallow duplicates
strip: true, // strip/trim text
parameterName: false, // name-attribute of the generated hidden input-elements
className: "tagify", // css-class name
add:[], // default tags
removeEffect: false, //effects and effect-options
addEffect:false,
removeEffectOptions: {},
addEffectOptions: {},
duplicateEffect: Effect.Highlight
}
});
With this option you can specify the seperators for your text. By default tags are seperated by ",". You can however add as many seperators as you like:
new Tagify('id', {splitBy: ', ;'});
In this example tags can be seperated by comma, semicolon or space.
Because this separators are used in a regular expression you have to escape charactars with a special meaning... (This should however not be a problem for you in most cases...)
new Tagify('id', {duplicates: false});
new Tagify('id', {strip: false});
With this option you can customize with wich parameter the data should be send to your server. If you leave out this paramter Tagify will automatically detect the name of your original input and append "_tagify" to it. The data then gets send as an array with the specified name.
// change the name to "tags"
new Tagify('id', {parameterName: "tags"});
// default behaviour is this:
//HTML < type="text" name="words" />
new Tagify('id');
// Tags will be available on the server side in an array called words_tagified
//if your form is a GET instead of a POST just replace POST with GET.
// if JavaScript is disabled Tagify does not work and there will be no words_tagified:
if(!isset($_POST['words_tagified'])
{
//this is just a fallback if JS is disabled
//retrieve the tags from the normal string, and explode it:
$tags = explode(",", $_POST['word']);
}
else
{
$tags = $_POST['words_tagified'];
}
foreach($tags as $tag)
{
//save to database or echo them....
echo $tag;
}
new Tagify('id', {className: "tagified"});
new Tagify('id', {add: ["dog", "cat", "mouse"]});
<input type="text" name="words" value="dog,cat,mouse" />
new Tagify('id', {addEffect: Effect.Appear});
new Tagify('id', {addEffect: Effect.Appear, addEffectOptions: {duration:0.5, from:0.1}});
new Tagify('id', {removeEffect: Effect.Fade});
new Tagify('id', {removeEffect: Effect.Fade, removeEffectOptions: {duration:0.5}});
new Tagify('id', {duplicateEffect: Effect.Highlight});
new Tagify('id', {duplicateEffect: Effect.Highlight, duplicateEffectOptions: {duration:0.5}});
var tf = new Tagify($('element'));
tf.add('mytag');