Posts Tagged ‘code’

jQuery Tag input

Saturday, January 24th, 2009

While implementing the function to “connect to friends” in our social network eventize.de, I thought about improving the handling of tags a bit.

The idea was to be able to select tags that were already in use (because it’s likely to use them over and over again). So I build a small jQuery plugin that does exactly this job:

tag_input_screenshot

What you basically need is a text field. I post my Rails code here:

<%= text_field_tag :tag_list, value,
  :class => 'text_input',
  :id => identifier_field,
  :onfocus => "jQuery.taginput.showTagList('##{identifier_field}', '##{identifier_popup}')",
  :onblur => "jQuery.taginput.hideTagList('##{identifier_field}', '##{identifier_popup}')",
  :oninput => "jQuery.taginput.setAlreadyUsedTags('##{identifier_field}', '##{identifier_popup}')",
  :autocomplete => 'off'
%>

And a bit HTML code to prebuild the popup (This could be done with jQuery, too):

Alright, go ahead and check it out for yourself. The code is pretty basic and there’s a lot of space for improvement. If you have any suggestions, post a comment!

jquerytaginput-10