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