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)

Edited by Aeonix

9 Months
Discussion Span
Last Post by Dani

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

Votes + Comments
Oooh, that could be less grunt.js
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.