jQuery autofill with multiple values and icons (email to field)

I want to create a recipient field on a form using a jQuery autocomplete field for the lookup. I want this to be allowing multiple values. I am already clued up on how to do this.

The catch is, when adding a recipient and using auto complete to perform the l开发者_StackOverflow中文版ookup, the recipient name should have a blue background with a remove icon (x) next to it, similar to the "To" field on the iPhone, or the person lookup in Facebook (when creating a new group in FB for instance)

Any ideas welcome!

Thanks for your time, Albert

---

First of all you need to understand that what you want to do is not a function available by default with just one html element (in this case an input).

I won't enter in many technical details since that would mean spoon-feeding, I prefer to point you into the right direction; hope you don't mind, here it goes:

Firs you need to have a container that will look like a block, lets say a div. Inside of it you'll have the input field which should take just a part of the container, like this:

<div id="tag_editor">
  <span id="tokens"><!-- js stores tags here --></span>
  <input type="text" id="tag_editor_input">
</div>

Once you write some text on that input, the autocompletion should appear normally. However, you'll need a hook so that when you're unfocused or click the suggestions your the content of the input gets converted to a HTML element displaying the data, you should stored in the tokens container.

Of course the input box will be the same, but it'll shift to the right, example:

Once you've done this, you should be able to add as many tags as needed. Then when you need to get the data, just iterate through the contents of #tokens and use them as a part of the data.

Hope it helps.