Imagine a mailbox. You're about to write to a friend. From staff perspective, someone wants to email Dani, her mail is dani@daniweb.com, 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 "dani@daniweb.com". 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 dani@daniweb.com, 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)

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

commented: Oooh, that could be less grunt.js +0