DHTML auto-complete text field

Posted on June 20, 2005

Been playing around with this small-footprint auto-complete textfield. It's currently fed by a hardcoded javascript array, but the idea is to hook it up to an AJAX / XMLHttpRequest.

The example works by layering two textfields over one another using absolute positioning. The lower text field is deactivated, and contains the suggestions. An onKeyUp handler on the input textfield triggers the javascript. If a (case-insensitive) match is found, the suggestion is pasted into the suggestion field, and a button to accept the suggestion appears to the right.

What I haven't yet managed to do is hide both the suggestion and the button when then input field loses focus. OnBlur works fine as long as the user doesn't click the button. When the user tries to click the button, the field loses focus, and the button disappears before it's onClick is triggered.

This obviously only works in browsers that allow transparent backgrounds in textfields; ie. not in Safari (at least not in v.1.3). Works fine in Firefox on a mac. Haven't tried PC.

Comments (4)

Jeff Wheeler said

Wow, this works great in Camino! I love the effect, and it is so beautiful! Thanks :)

Posted by: Jeff Wheeler at June 21, 2005 06:51 AM .

Blue said

Wworked great on PC (IE 6 XP SP2). Love the idea, although agree that hard coding would be a headace.

Posted by: Blue at June 22, 2005 07:57 PM .

Posted by: bsn at September 25, 2006 06:13 PM .

Nick said

Superb scripts. Thanks for your time and effort.

Posted by: Nick at October 3, 2007 12:36 PM .