Autocomplete list with contacts

[Aeonix]

Imagine a mailbox. You're about to write to a friend. From staff perspective, someone wants to email Dani, her mail is [e-mail], but has her in contacts list. You type in "Da", and little tool-tip informs you that it knows this mail, tooltip shows her full name "Dani" and her email "[e-mail]". You have two options, you click on a link within tool-tip to select her or you write out her email entirely. Now, if you choose to type out her name, instead of flat out text [e-mail], jQuery/JavaScript changes it to nicely formatted <span>Dani</span> (where I will add dropdown lateron). If you choose to use help of tool-tip <span>Dani</span> will immediately pop-up without you even typing full "Dani".

I have prepared the basics, the list, the span, the dropdown and the textfield: https://jsfiddle.net/uf6t5voL/

I don't know how to manage automatic recognition, fusing <input> and <span> in the same field, and tool-tipping while typing.
Could someone help me finish it up? Links, suggestions, shows?

(I hope you don't mind me using you as an example Dani, nothing personal or offensive meant)

[diafol]

Twitter typeahead is pretty good - have used it successfully on a number of DIY CRM apps: https://github.com/twitter/typeahead.js/blob/master/doc/bloodhound.md

[diafol]

Sorry this is the link: https://github.com/twitter/typeahead.js

[Dani]

I use jQuery UI tooltip for the autocomplete for tagging and member usernames.