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

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

From stackoverflow

• 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!

• 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).

  vdh_ant : Thanks a lot, just what i am looking for.