How can I implement a gmail-style label chooser?

Question

What's the easiest way to implement (something like) Gmail's interface for labeling messages? Does any javascript library have a widget like this?

Behavior:

1. Click a label in the dropdown to immediately label the message.
2. Check multiple labels and then "Apply" to add multiple labels (not sure I like the "Apply" requirement...)
3. Type in the box to narrow down your list of labels. If you narrow it down to 1, pressing enter applies that label.
4. Trigger the widget with the shortcut key "L".

Answer 1

I doubt there is a precooked solution out there that does exactly what you want, but you should be able to put something together yourself with a decent JavaScript library. Something like Ext JS would be ideal for this.

A few API pages of potential interest:

• Ext.Panel
• Ext.form.TextArea
• Ext.menu.CheckItem
• Ext.KeyNav

Answer 2

Horace - you want something really complicated, and you should take into account that even with a lot of pre-made component, it will take some time to get something like this working (not to mention - being pretty :-) ).

Anyway, pre-made components are nice but I often like to hack it myself, free-style like. So here is something I cooked up to get you going: My simple label demo (warning - I only tested this on Firefox 3 and I'm pretty sure that it won't work in anything else).

It is far from being pretty, but the code is pretty straight forward and should be easy to understand.

Answer 3

I was looking for a similar label implementation, and stumbled on this thread.

I can't add to the JS part of the question, but in terms of the "prettiness" of the labels, you might find the following article/code useful:

CSS Gmail-Like Labels

All the best!