Wednesday, September 01, 2004

GeekStuff: GMail JavaScript Autocomplete Functionality

UPDATE: THIS IS NOW AN OPEN-SOURCE PROJECT LOCATED http://wick.sourceforge.net/. Announcement.

Once upon a "gmail" PubSub RSS Feed, I stumbled upon Brian's contest. I figured this'd make a fun late-nights project. And it was! Turns out, I won too. :) Thanks Brian!

I'm not planning to dump out the code, as it'd be of little interest to developers out to have their own fun.

A more interesting exercise would be to elaborate on Brian's requirements and explore in more details some of the use cases Google's paid attention to, in random "order" for now:
  1. properly handling comma-delimited lists while preserving carriage returns users may enter after each entry.
  2. after the last entry's following-comma, hitting the delete key should bring back the helper with the one matching selection, entirely bolded, while each character gets un-bolded upon subsequent delete key presses
  3. clicking outside the textarea makes the helper go away. clicking back inside, brings it back
  4. a user needs to be able to pick a suggested entry using keyboard up and down arrows, or using the mouse
  5. when pressing the up arrow to cycle thru the various suggestions, the cursor must always stay put, at the end of input box. This is important as this gives a user the ability to keep typing letters even after cycling thru suggestions.
  6. ... there's much more, which I'll try to cover in subsequent updates. Feel free to participate in comments, below
I'd also like to explore a couple of browser quirks. But I need to isolate them in simpler code samples, and scour open-source BugZilla archives to see if they've already been addressed. Support for event.preventDefault() comes to mind. And some weird Safari issue tied to setting a layer's display to none without mouse movement.

Feel free to grace my insignificant blog with your thoughts n' questions in comments below.

14 comments:

Anonymous said...

A copy of the source may not be interesting for those looking to repeat the work, but it would certainly helpful for those of us who would like to use a component like that in other projects, to avoid re-inventing the wheel.

Since you (sort of) got paid to write the code, though, I can understand you not wanting to open it up.

Anonymous said...

I agree with the guy from the previous anonymous post... I, for instance, would really love that script in a project here at the company.

If it's really exactly like gmail's script, would you sell it?

Anonymous said...

Well here is a component that I developed just before I got my gmail account, and was surprised the folks at google had it already :)

http://momche.net/publish/article.php?page=acdropdown

Hope it helps you in something

david said...

Hi Chris. Could you please contact me regarding how one can obtain a license for this script. I had trouble finding your e-mail address on your site, starting to suspect it has been omitted intentionally. :-)

david (at] goodcompany (insertdot] dk

regards

Anonymous said...

Hi Chris,

First, congrats on cracking the code.

Now, why are you REALLY keeping this code locked up? Ego? Do you work for Microsoft? Or are you just too l33t to be cool to other developers like yourself.

I do hope you wind up in a similar predicament someday and I hope that it costs you a lot more that $50 to get a solution. Tool.

Anyway, for those of you who are interested in actually seeing some code, go here:

http://www.geocities.com/nbilalis/combobox.htm

Thanks alot Chris. We'll get it figured out without you anyway.

Chris Holland said...

uh, i'm not sure i'll be dignifying the previous post with a reply.

Everybody else, here's a quick update:

I've been working with a couple of people to test out the script in their applications. if you're a developer with javascript background and interested to take a look at it, shoot me an e-mail.

i've also been looking at creative commons. i'll see where that takes me. so far i'm thinking free non-commercial license, derivatives, share-alike. suggestions?

Some people commented here without leaving an e-mail address or making it possible for me to hunt-down their e-mail address. Mine is at gmail.com ... frenchy is the username ... if someone cares for friendly banter ( the email is also displayed in the blogger profile).

Anonymous said...

First of all: congrats on succeeding the autocomplete. I've been trying to develop it myself, but haven't yet succeeded to get it to work properly on all platforms. Did you manage to support Safari. I got to know Safari can be a real pain in the ass! Anyway, I would like you to drop me a line if you're thinking about publishing, or if you need bug-testing. you may contact me at jelle, domain ambrero.nl. Cheers...

Anonymous said...

I have created something similar (although probably more basic), see http://www.dcs.lancs.ac.uk/~grill/mgbox/ for an example.

Anonymous said...

Weird. Why don't you just post the code or something... Use LGPL, Creative Commons, or whatever... unless you really think it's *that* precious to protect.

And there are tutorials (like in SitePoint) for doing so, they aren't just exposing the code but even teaching you step-by-step on how to make one... and they don't charge a cent for that.

Anonymous said...

a slightly more robust solution with php, asp, asp.net, and jsp backends can be seen here (but its not free):

eba web combo v3
http://developer.ebusiness-apps.com/technologies/webdevelopment/codeandcomponents/ebawebcombov3/media/demos.htm

Anonymous said...

I've made a similar one, but there's less code :)

http://www.jsfromhell.com/dhtml/incremental-search

Anonymous said...

Wick source code is here.

Unknown said...

How 'autocomplete search' on font Unicode?

Chris Holland said...

Eh? I'm not sure i understand your question?