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)

Recommended Answers

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

Jump to Post

All 3 Replies

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

commented: Oooh, that could be less grunt.js +0
Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.21 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.