Gmail's javascript to field suggestions dropdown

Does anyone know how to do this?

[edisraf321]

If anyone here uses gmail, you've noticed the cool feature where it will suggest contacts in your contact list just by typing the first letter of their name.

Does anyone know how to implement this?

It must be done in javascript, and I'm no expert there. I tried to find the function in their code, but they make it extremely hard to read, so i gave up.

-Chris

[whoisgregg]

You mean javascript auto-completion?

Never done it myself, but here's one place claiming a sometimes functioning version:
[webreference.com...]

[edisraf321]

Yes, that's exactly what I was looking for.

I try out the code in that example, thanks for the link!

-Chris

[chrisholland]

I've actually built Gmail's entire autocomplete functionality from scratch, after taking-on a contest that Brian Sweeting started

<No blog links, please>

It was a fun exercise :-)

[edited by: DrDoc at 7:59 pm (utc) on Sep. 29, 2004]

[chrisholland]

yeah i've seen some of their work. It's very cool, very nifty, very handy.

But in the end, these fine folks have set themselves out to accomplish something that was very different from the requirements I was working with.

Building out something equivalent to gmail's feature-set was orders of magnitude more complex than what these fine folks have accomplished.

If I was to try to write an article that'd match the thoroughness and fine editorial work by Nicholas C. Zakas, you'd be looking at a 20 page document, sure to put just about anyone to sleep ... my code currently weighs-in at about 400+ lines, 1000+ words, 13KB.

[whoisgregg]

I realize those are much simpler autocomplete scripts, but for the webmaster with only a basic grasp of javascript (like me) stuff like that makes for a good starting point.

Perhaps eventually someone will do a really great drop-in script and release it to the public domain for the benefit of the less skilled (again, like me!), but until then ... gotta work with what's at hand. Maybe in a few years when I've got the skills, I'll be able to do that. :D

[DrDoc]

The problem with most of these is that they sometimes break if the user actually has autocomplete turned on. Also, they have poor cross-browser reliability.

We've had a couple discussions on this topic before, most involving simply looking up a value in a dropdown...

[chrisholland]

i agree, those scripts are very cool and will fit most people's needs :) plus, they'll be great starting points to build even cooler things, as some have shown in their comments. have fun, and good luck :)

[chrisholland]

dr doc: good point about the browser's native autocomplete. One way to get around this, is to use a "textarea" instead of an "input" box. Most web-mail systems use 1 or 2-rows textareas for to: and cc: fields, to make it easier to enter a slew of addresses on multiple lines. As far as I remember, a textarea shouldn't trigger the browser's built-in auto-complete. I may be wrong though. :/ There may also be ways to short-circuit built-in auto-completion via the use of eventObject.preventDefault() and/or setting returnValue to false upon focus of a regular input box, though I haven't yet researched it.

Within the limited domain of the requirements I was working with, cross-browser compatibility is decently achievable across KHTML/Gecko/Trident (Safari, *zilla, IE) rendering engines, without too much hacking.

When wondering about specific cross-engine DOM/CSS compatibilities issues, I like to check out Peter-Paul Koch's site at [quirksmode.org...] . He's done some very useful research.

[whoisgregg]

simply looking up a value in a dropdown

Like this kind of thing:
[mattkruse.com...]

<added>
Actually would be a nice implementation since the user could also select from the dropdown directly. (Until of course there's more than 20-30 to choose from, then it would be much less usable.)
</added>

[n1ck0s]

Well, check this out:

[geocities.com...]

I've created that using Overlib script (I don't know much about DHTML, plus that way is REALL cross-browser). I was looking for a "auto-complete list" or an "editable drop-down" or whatever you want to call it, for a long time.

This thing I put together seems to be working really nice (it even works w/ Netscape 6), but it still needs some improvements and fixes (Up and Down arrows worked a week ago, but I managed to ruin that).

Anyway, take a look, and if you are interested in helping me developing this widget, let me now. I dont visit this forum often, so please feel free to send me an email.

n1ck0s.

[mircho]

or something like this (more advanced autocomplete with dropdown suggestions):
[momche.net...]

or the simple input autocomplete:
[momche.net...]