box email addresses like hotmail

Question

I don't know what this is called hence having a hard time finding any reference on the net for this. On hotmail when you enter an email it boxes the email into a rectange block one by one on the same line with options to edit and delete the email. What is this and are there any sample code/frameworks to implement something similar?

Thanks.

Amadan · Accepted Answer · 2011-04-25T19:07:16.700

3

It's normally a UL, and inside it you have LI which are either elements styled to have a box around them (emails, in your case), or a borderless INPUT box which blends into the surrounding UL of the same background. JavaScript code handles deletion and insertion of box LIs according to keyboard input. I am not aware of framework support for it, but it may exist.

EDIT: It exists. http://plugins.jquery.com/plugin-tags/tags for jQuery options.

edited Apr 25 '11 at 19:07

answered Apr 25 '11 at 18:49

Amadan

191,408
23
240
301

so it is not jquery, just to be sure? – Keith Apr 25 '11 at 18:58
Hm, i'll play with it and see if it works then post back. Thanks though. – Keith Apr 25 '11 at 19:24
Link to plugin is down. +1 still – Armel Larcier Feb 06 '13 at 15:00
@ArmelLarcier: Plenty of alternatives left. [Tags Manager](https://github.com/max-favilli/tagmanager), [jQuery Tagit](https://github.com/hailwood/jQuery-Tagit), [jQuery Tags Input](https://github.com/xoxco/jQuery-Tags-Input)... – Amadan Feb 07 '13 at 05:23

Amrit Kahlon · Answer 2 · 2012-11-30T22:58:11.103

I was looking for the same thing, and upon looking at the source code for it. It seems that they are using a UL like Amadan said, but its set up like this:

<div id="container">
    <ul id="email_list">
       <li class="email_token valid" id="a@a.com" email="a@a.com">
            <p>a@a.com</p>
            <span class="delete_link">x</span>
       </li>
       <li class="email_token valid" id="b@b.com" email="b@b.com">
            <p>b@b.com</p>
            <span class="delete_link">x</span>
       </li>
       <li class="email_input_container">
            <textarea class="email_input_field"></textarea>
       </li>
    </ul>
</div>

EDIT: I ended up implementing it and it runs wonderfully!

score -1 · Answer 3 · answered Apr 25 '11 at 20:05

-1

Try to use Firefox+Firebug to inspect the elements in hotmail. It'll help you to find out yourself.

answered Apr 25 '11 at 20:05

cweiske

30,033
14
133
194

box email addresses like hotmail

3 Answers3