Ever since I first saw the interface of lastfm’s tagging-function I wanted to create a similar interface. So what does it look like? There is a simple textbox in which you type your tags. Tags are separated by comma. If you type a comma it will automatically add a nice visual box with your new tag. Just have a look:
Tagging on last.fm
It’s really neat and intuitiv. You see what you will get and you can easily delete your tags.
Tagify
I looked how they did it and then came up with my own solution: Tagify. It’s a simple prototype-based class that converts normal input-elements to a nice “tagging interface”. Well, it doesn’t provide all the functionallity you know from last.fm, but I think it does a pretty good job in providing the basics.
Just include tagify.js, tagify.css and call something like this:
new Tagify(‘id_of_an_input_element’);
That’s all if you stick to the defaults. It gives you the interface seen in the picture above. Internally all tags are added to an “array” – if you submit a form with a tagified input element you can grab all tags from that array.
Just have a look at the documentation and try it out.
Project page and download is here:
Joris
/ May 22, 2009This is awesome. Exactly what I need. Lightweight and simple. It works great together with autocomplete in Rails.
I downloaded the code, added it to my application in less than 1 minute.
Joris
/ May 23, 2009Hmm it doesn’t play well with rails.
* The ‘input’ id is not the same as the ‘output’ id, which breaks the flow. I tried to set ‘parameterName’ to the same id as the input id, but that doesn’t work.
* With autcomplete it adds the partial typed word instead of the found/selected word. The onblur is too early.
Joris
/ May 23, 2009It also returns the values in an array, and not in a string with comma’s. Tagify works great, but not as a ‘drop-in’ on existing behaviour. I will try to modify the code to make it work for me.
Andreas
/ May 23, 2009Hi Joris,
thanks for your feedback. Since I also use rails a lot I’ll take a look at it.
You can also take a look at “TextboxList” from Guillermo Ranch. Perhaps that’s a better fit with rails: http://ajaxian.com/archives/the-new-textboxlist
Joris
/ May 23, 2009Hi Andreas,
I updated the javascript code such that it is a seamless drop-in replacement (for a text field). No need to do special things on the client and server side. If javascript is disabled, it uses a normal text field with comma separeted values, when javascript is enabled it is replaced by your tagify implementation, but still uses the same fieldname when submitting the tags.
I want to send you the code to review, check or enhance; however I cannot find your e-mail address. Can you send me an e-mail?
Thanks!
Joris
Paul
/ July 15, 2009Hi Andreas,
To be honest I saw few days ago the TextboxList from Guillermo, good stuff, but today I saw yours and i liked it the most, yours is more simple and it is exactly what I need. I’m not good at javascript but your is easy to understand, good programming I guess.
I hope you can help me in this one, I want to have several pointing to the same textbox and adding tags, is that possible?
Regards,
Pablo
Paul
/ July 15, 2009Sorry for the post above, it is missed up.
I meant:
I want to have several a href = onclick:addtag(‘tag’); pointing to the same textbox and adding tags, is that possible?
Regards,
Pablo
courtenay
/ August 24, 2009Think this is much easier to integrate with other frameworks like .NET…