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)

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

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.