Contest: Gmail JavaScript Auto-complete Functionality
July 16th, 2004
Update 1: Chris Holland has been announced as the winner of this contest.
Update 2: Chris just opened this as a sourceforge project called WICK (Web Input Completion Kit), so now all the people requesting the code can get it from there.
Calling All JavaScript Gurus!
The first person who can accurately reproduce GMail’s javascript autocompletion functionality will win their choice of a $50 Amazon.com Gift Certificate or a $50 iTunes Gift Certificate. (Not to mention all the praise and promotion I can possibly mete out.)
The requirements are:
- The tool must exactly replicate the functionality of GMail’s autocompletion of email addresses when you are in the compose screen
This means it must consist of a textarea/input (type=text) element (not a select element), upon typing the first character, a dropdown must appear with the names/email addresses containg the matching string of characters that is being typed, and it must decrease in size as the typing is in process. The portion that matches in the dropdown, must be highlighted, and both the first name, last name, and email address must be “searchable”. Additional addresses should be able to be added separated by a comma.
- Must be cross-browser (work in IE 5.5+, Firefox .9+, Safari 1+)
If you think you are up to the challenge, send me a url to your example via my contact page. I am an honorable person, and will graciously award the aforementioned prize on the winner. In other words, if you do this, I will not steal your code.
July 26th, 2004 at 4:28 am
heh. i’ve been meaning to build this, thanks for reminding me 8).
August 3rd, 2004 at 4:57 am
i started coding it on my flight to houston this weekend, i’m about 30% there. i think. HEH. not enough hours in a day, work and fun with GF get in the way. this is fun tho. i’ll be abstracting it enough so you could just set a reserved CSS class value to any text input, part of which would contain some identifier I can link to a collection of data as the source for the functionality. So like: input type=”text” class=”someUnrelatedClassValue triggerSmartInput_addressbookData”. I’m basically leveraging the fact that a class attribute may contain several values separated by spaces.
the code would live in a separate .js file you would ideally include at the *bottom* of a document, so your page draws first, and richer UI scripting and event handlers load last. And that’s my generic foolosophy for UI/DHTML scripting triggered by user interaction *after* a page has loaded 8).
oh and it will * definitely * work in all reasonably modern browsers, I’m all about Safari and Mozilla 8)
i hope this doesn’t fall off my radar :o
anyhoo, cheerio! :D
August 5th, 2004 at 5:34 am
w00t! \o/
i’m about 70% there. or something. made good progress last night. i’ve still gotta do many a tweak to matching logic, and implement result selection based on keyboard or mouse input, while accommodating several results. and many things i’m not quite thinking of right now :o
August 13th, 2004 at 5:52 am
i’ve dramatically reduced the amount of code i was using in the matching logic by better leveraging regexps. i think i’ve got this specific piece working flawlessly. I kinda lost 2 hours on this whole exercise but i think they were still worth it. heh. i must find more time to finish this! i feel so close! heh. still 70%, heh!
August 16th, 2004 at 1:24 am
heh, so close! i’ve reached about 90% over the weekend. the thing is essentially working: type, see matches up to parametrable match limit, scroll thru matches, pick match, insert match. I’m also properly handling multiple entries on both match and insertion logics … i think! hehe. There are many many UI details to take into consideration which google has addressed nicely, and with which I want to be at least up to par. Addressing such details might cause me to redo things from scratch! heh.
fun stuff. getting to be addictive. i’ll prolly have more time to work on it next weekend.
August 17th, 2004 at 12:16 pm
Hi,
I have done almost all……i am having slight problems in getting ‘ browsing through the email id using up/down keys’
August 17th, 2004 at 12:53 pm
95% 8)
August 19th, 2004 at 2:23 am
Chris: I’ve got the scrolling part pretty much down pat. Email me if you still need help with that, and maybe we can collaborate. =-)
Warm regards,
- Gabe Hollombe (gabe AT avantbard.com)
August 20th, 2004 at 4:53 am
Gabe: thanks, but “sandosh” was the one having issues with the scrolling. Comments get confusing hehehe :)
i’m pretty-much done, well, 98%. will go over minute usability details, clean-up and sanity-checking over the weekend.
Brian, if you’re reading this, did u get my last couple emails? did Gabe win? :) if so, congrats :D
-c
August 22nd, 2004 at 11:19 am
Chris – The contest is still open…I haven’t heard anything from Gabe or sandosh.
August 23rd, 2004 at 4:06 am
cool, good to know. i got to 100% feature-complete over the weekend, there are 3 bugs that crop-up in fringe use-cases which I still need to address. so … 99% heh! :)
August 24th, 2004 at 4:32 am
I would also be _very_ interested in a script like that. Would you release it as a free script or keep it to yourself :P ?
August 24th, 2004 at 10:28 am
Oops, sorry, Chris. Yeah, confusing comments + me not reading carefully, I ’spose. =-)
Anyway, I spent a few hours on this as more of a coding exercize than a real goal. I got far enough to get an autocomplete popup with keyboard and mouse support, but it only works for one string (matches ‘food’ on ‘foo’, but won’t match ‘dog food’, for example). Then I just got burnt out and hoped that someone else (like you, maybe, Chris?) would post some complete code here sometime soon.
Like Sindre asks, will you release your finished code as a free script?
Good luck with the last fringe bug fixes!
- G
August 25th, 2004 at 4:29 am
heh this thread is alive! :) Gabe i totally relate to your challenge hehe, it’s a fun exercise tho. Details and cross-browser flawlessness are part of the hair-pulling aspects of this whole exercise. it really helps knowing that google has nicely addressed all those issues, so i don’t get lazy and dismiss them.
I’ve been really busy outside of work and it’s hard to find myself continuous blocks of times, but i’m very close now, 3 bugs standings.
I’m hoping to give this code to Brian and then the company i work for. After that, we’ll see. if it’s good, i figure people will find it and rip it, heh :)
August 26th, 2004 at 3:30 am
*splat*. bugs … dead!@ ALL DEAD! hooh-hah-hah.
i think i’m at 100% now. I’ve only been doing thorough testing in OS X land, i’ll need to do some sanity-checking in PC land, but so far ive got the following browsers covered on OS X:
Gecko dudes (all outdated by now):
- firefox 0.8, mozilla 1.3 (beside one bug tied to non-support of specific event, fixed in later versions of moz/gecko), netscape 7.1, camino 0.7
- Safari 1.2.3 (Current)
- IE 5.2 (Current) (beside the box taking up the whole screen ‘cuz it won’t properly handle the width:auto CSS directive, psshaaah!).
I know mozilla under linux was happy last i had checked. It didn’t work for crap under Konqeror, I think it’s not registering one or more of my event handlers.
I’ll also be doing a lot of clean-up and abstracting into a more easily plugged form.
Brian, you’ve almost got mail. Lemme know whether or not it meets your requirements :)
August 28th, 2004 at 6:22 am
All done I think. Brian’s guna be reviewing the code soon. I’ve sent him a couple of bugfix versions :)
That was fun :]
September 9th, 2004 at 2:54 am
Any chance that you’ll be posting the code? I’d absolutely love to use it on my website, but don’t have the javascript-knowhow to do it myself. :)
December 2nd, 2004 at 6:53 am
Yes, posting the code would be most appreciated! Whaddaya think?
April 25th, 2005 at 8:59 am
i really need this code :/ Plzzz Help me, i not able to create someth workful :/
May 19th, 2005 at 9:18 am
[...] ntal Purist
WICK
Chris Holland who is the author of the original javascript autocompletion code, has launche [...]
May 26th, 2005 at 4:42 pm
[...] nd function
WICK
Chris Holland who is the author of the original javascript autocompletion code, has launche [...]
June 29th, 2005 at 3:52 pm
I think you can see a very well developed version of this here. quite a bit better than wick
http://developer.ebusiness-apps.com/technologies/webdevelopment/codeandcomponents/ebawebcombov3/media/demos.htm
August 7th, 2005 at 4:20 am
Stumbled here by chance.
I have one online since October 2004 at:
http://www.unitedscripters.com/scripts/dhtml15.html
It uses Binary Search to pick up from a storehouse the items that must appear in the hint scroll down menu. Maybe worth a look. I’m not here to compete.
January 7th, 2006 at 11:00 am
the code would be apreciated. i have to try get something similer implemented in an app thing im working on (web based)
congrats chris *bows to greatness*
September 27th, 2006 at 10:26 pm
dude you are a GOD, my associates asked me if I could implement the gmail thing, i scratched my head thought i give it a shot. Anyways i gave up but u saved me.
I learned a valuble lesson tonight, one i should leave the GOD like task to the gods.
Would you like a job? HAHA