Using jquery, how can I handle tags the same way that Live Mail handles email addresses?

Question

I have a need to have a tag-like system that operates very similarly to how Live Mail does email addresses.

For those who don't know, Live Mail provides a textbox in which you can enter email addresses. As you finish typing in an email address, Live Mail changes the address from being plain text into a div that has a border and has the text within. If you want to remove the address, you hover over the address and a cross comes up on the right. You can't change an address after it has been "tagged." If you want to change it, you need to remove it and re-add it.

This is the functionality that I require, except that I will be doing this with tags instead of email addresses.

I was wondering if anyone knows of a jquery component that works in this fashion.

Cheers, Anthony

Answer 1

I never heard of such a JQuery plugin, but it shouldn't be too hard to accomplish on your own. However, it will require some knowledge about CSS for the actual looks of course.

// Code for replacing a textbox with a DIV on blur.
$('#textbox').blur(function () {
  var content = $(this).val();
  if (!content) return; // Don't make anything out of empty textboxes.
  // Create a DIV and make it a sibling to the textbox.
  $('<div>').html(content).appendTo($(this).parent());
  // Remove the textbox.
  $(this).remove();
});

I haven't tested any of this by the way, but this should get you on the right track.

HTH!

Answer 2

jquery facebook autocomplete (via Ajaxian)

There's a book on Jquery 1.6 UI that has an auto-complete for emails as well as onle of the last examples of Autocomplete (book source code).