Using jquery, how can I handle tags the same way that Live Mail handles email addresses?
-
09-09-2019 - |
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
Solution
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).
OTHER TIPS
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!