Tag it! Tag suggestions, editor and autocomplete in a jQuery UI plugin
After looking for a jQuery plugin for handling a tag suggestion form field, also with a autocomplete feature – in much the same way ZenDesk.com does – I ended up developing a customization of jQuery UI that does the same interaction.
UPDATE June 19th, 2011: due to other pressing priorities I delegated the development/support of this plugin to Alex Ehlke who is now doing an amazing job keeping this plugin up to date. Links below are now pointing to his repository. Thanks for your amazing help, Alex!
Official page for the project: http://aehlke.github.com/tag-it/
See the screenshot
See the Demo
Fork Tag it! on Github
Download the Tag it! plugin
Cheers! 
April 2nd, 2010 at 8:48 AM
What license is this plugin?
April 9th, 2010 at 7:27 AM
I got it working well enough in FF, but it does not seem to work in IE 8. The box is not even visible.
Also, the css affects other elements on the page (pretty much all of them).
April 9th, 2010 at 11:29 AM
Hi!
Tried your plugin, quite nice, butI have a few questions.
1. How do I set some initial tags ?
I have a page with saved tags, I want to list them in the editor if I reload the page.
2. Is there a option to only match the first letters of the autocomplete?
If I type “av”, i get the suggestions; “java” & “javascript”.
I would like to only get them if it matches the beginning of the word (“ja”)
April 9th, 2010 at 12:13 PM
Figured out the answer to question 1 myself and also fixed if empty…
Added this to your script:
//… row 4
var defaults = {
availableTags: [],
values: []
}
var options = $.extend(defaults, options);
//… row 26
// read initial values
for (var i = 0; i < options.values.length; i++) {
create_choice(jQuery.trim(options.values[i]));
}
//——————-
Calling Tag It! with:
$(“#mytags”).tagit({
availableTags: ["tag1","tag2", "tag3"],
values: ["tag2"]
});
Still wondering about Q2 though..
April 9th, 2010 at 8:52 PM
BTW, IE didn’t like the ‘const’ declarations. Changed them to ‘var’ and it works.
May 19th, 2010 at 6:56 PM
Hi,
Great script! I am trying to have it show the previously added tags for an item. So after saving them in the DB, i can edit/delete of add tags. But can’t get it to work. Any ideas? For now I’ve tried to create a loop and add this for each DB result:
while($arr=mysql_fetch_array($res)) {
$tagitems.=’
‘.$arr['tag_name'].’
x
‘;
}
Any ideas?
May 31st, 2010 at 8:59 AM
Hi all,
i’m testing the tag-it plugin ( congratulations, very very nice and useful).
i’ve a question: i have a web form with tagit! and by php i send the choosen values to mysql. (the single tags are picked up by the “insert.php” script and imploded into a string to the database). here everything goes well.
Then i have the necessity to re-open the form, pick up the saved tags to visualize them (explode the string of the db to a new array), and of course add new tags or delete a previous one.
i thought this could work, but nothing….
foreach ($array as $tags)
{
echo’ ‘.$tags’.x
‘;
}
also adding the final string:
nothing… no-one of the loaded value is displayed and the script just show me an emty field.
Do you think what i’m trying to realize would be possible?
Thank you very much if you can help me to resolve this nightmare !!
stefano
June 2nd, 2010 at 1:26 PM
Was searching for somthing like this and this looks perfect, great job but I have a question about implementation. the auto complete is working but in my implementation instead of creating new tags inside the box, I get a new line each time (screen shot: http://img2.pict.com/fe/79/04/3594365/0/1275495856.jpg). Is this css or have I implemented it incorrectly:
$(document).ready(function(){
$(“#tags”).tagit({
availableTags: ["fish", "turtles", "janurary jones", "ocean"]
});
});
..
..
..
Tags:
June 2nd, 2010 at 1:29 PM
Sorry about the bad post! didn’t realize that it would take the html tag and try to use them. I put it up in pastebin for review =) http://pastebin.com/Kqv96y3Q
June 2nd, 2010 at 1:40 PM
I’m trying to work to fast here and missing simple things. Haha fixed so ignore my dumb questions and thanks again for the plugin!
June 5th, 2010 at 4:46 PM
Hi,
I tried to put 2 inputs, but there is some bug. The last input is always focus when I click on other input.
Try this :
Tags
Tags
JS :
$(“#mytags”).tagit({
availableTags: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"],
values: ["tag2"]
});
$(“#mytags2″).tagit({
availableTags: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"],
values: ["tag2"]
});
I think the problem is near from :
// add the tagit CSS class.
el.addClass(“tagit”);
// create the input field.
var html_input_field = “\n”;
el.html (html_input_field);
tag_input = el.children(“.tagit-new”).children(“.tagit-input”);
but I’m not an expert in JS.
Someone could help me plz ?
Thanks
June 13th, 2010 at 10:48 PM
if i want to add 1000 tags, can i open the list from an external file like txt without include in the javascript all the tags?
sorry for my english
June 26th, 2010 at 4:45 AM
Changing…
function split(val) {
return val.split(/,\s*/);
}
function extractLast(term) {
return split(term).pop();
}
tag_input.autocomplete({
source: function(request, response) {
$.getJSON(“search.php”, {
term: extractLast(request.term)
}, response);
},
And works great for my needs
thx alot
June 29th, 2010 at 11:42 AM
Hi there,
the plugin looks very good. Is there a possibility to use tagit! plugin for tags, which are stored in DB (using Ajax).
Thanks in advance for answers.
July 7th, 2010 at 12:21 AM
Bulan you are the man!
July 8th, 2010 at 11:20 PM
How to use multiple tag it fields on the same page…
(Line 19)
Change: tag_input = el.children(“.tagit-new”).children(“.tagit-input”);
To: var tag_input = el.children(“.tagit-new”).children(“.tagit-input”);
Then change all references to “this.tag_input” to “tag_input”.
September 17th, 2010 at 4:49 AM
Is there a way to prevent users from creating new tags. I.e. we have some forms where they should only be allowed to choose among existing tags.
September 17th, 2010 at 10:33 AM
I like this plugin very much, please chance the const to var like James said.
Is it possible to print a list with all the tags beneath it where they can select from?
Cheers
October 19th, 2010 at 4:10 AM
the best thing about IE8 is that it is quite stable than previous releases of Internet Explorer”";
December 22nd, 2010 at 3:01 AM
Hello
Can u help me get list tag from database ?
January 7th, 2011 at 6:23 AM
Great work! Just what I was looking for! Any chance to make it work with an ajax call to a .php file instead of an array of predefined words?
Thanks!
January 12th, 2011 at 1:36 PM
hey there! i can’t get it work but it exactly what i need
this is my code:
$(document).ready(function(){
$(“#ingredientes”).tagit({
availableTags: [ 'ajo','cebolla','aceite','patatas','mantequilla','sal','azucar','coñac','pan','agua-gas','caldo','arroz-blanco','perejil','harina','pimienta','albahaca','harina-fuerza','salsa-soja','pimiento-rojo','congrio','almejas','vino-blanco','pan-tostado','nata','manteca-sesamo','levadura-fresca','hierbabuena','pan-seco','merluza','alubias-verdes','huevo','queso-rallado','huevos','pasta','lima','agua','avecrem','rape','zanahoria','lechuga','queso','tomate','ron','pimenton','aceite-oliva','gambas','acelgas','caldo-pescado','puerros' ]
});
});
Where ingredientes it’s the id of the input. firebug gives me no error and tag-it.js it’s imported… any idea? :S
thanks for developing this awesome plugin i can’t wait to get it working
January 19th, 2011 at 8:29 AM
I have te same problem than Raphael, I put two tagit field, and when i click on the first, the second fiel take the focus. I did tha Mazil’s modification, but it bug again.
If someone find the solution, It will help me a lot.
Thanks
January 19th, 2011 at 10:02 AM
I found the problem, the tags fields must be in separate DIV, and it works
Tags
Tags 2
TY all for this script
January 19th, 2011 at 10:05 AM
Sorry the previous post don’t show the html tag
<div class="line">
<label for="ingredient_list">Tags</label>
<ul id="mytags"></ul>
</div>
<div class="line">
<label for="ingredient_list2">Tags 2</label>
<ul id="mytags2"></ul>
</div>
<input type="submit" value="OK">
January 26th, 2011 at 11:40 AM
ie doesn’t support const in javascript as far as i know.
just replace const by var
February 6th, 2011 at 6:33 AM
Hi,
I updated this plugin to support a single input field for holding all the form data for all the tags, rather than one hidden input per tag. This is an optional feature — see the docs and example usage.
Here is the git repo with the updates: https://github.com/aehlke/tag-it
Thanks for your nice work!