Feed Sign in with OpenID OpenID

Simon Willison’s Weblog

Auto-complete text boxes

There’s a great new article up on Sitepoint describing a technique for adding auto-complete functionality to normal HTML text input fields using Javascript. The code uses a whole bunch of browser-specific code, but it has to thanks to the unconsistent ways in which different browsers handle text selection ranges. Unfortunately the article doesn’t actually provide a demo of the code in action, so I’ve posted one here. It’s a very nice effect.

Posted 20th September 2003 at 12:24 am

This is Auto-complete text boxes by Simon Willison, posted on 20th September 2003.

View blog reactions

Next: "Interactive Tabular Data"

Previous: The pirate's code

15 comments

  1. In Mozilla you can't enter any colour that it doesn't have in its list. In fact you can't even enter 'brown' which is in the list as it autocompletes the 'b' to blue, and then believe the following 'r' is the first letter of a new colour that's going to replace the current selection.

    Tony Bowden - 20th September 2003 11:42 - #

  2. WFM in Mozilla Firebird 0.6.1+. It didn't work at first because I had set my user agent string to IE 6.0 WinXP. The script uses browser detection instead of object detection, which is not The Right Way™ to do it.

    Nice script, though. I was thinking of doing this myself, but I never got around to actually implementing it.

    Jan! - 20th September 2003 12:01 - #

  3. I'm not surprised the browser detection causes problems. It shouldn't be too hard to modify it to use object detection instead (probably by targetting the document.selection.createRange object used by IE).

    Simon Willison - 20th September 2003 12:24 - #

  4. Of course, this example is not accessable to users who are colour-blind, since the colours white, black, and grey are not included in the list of colours. :-)

    Scott Hanson - 20th September 2003 15:07 - #

  5. The biggest problem is that it breaks CTRL-A, CTRL-V, CTRL-C, etc.

    Dylan Moreland - 20th September 2003 17:09 - #

  6. Broken in Safari.

    Thijs van der Vossen - 20th September 2003 18:06 - #

  7. broken in IE/Mac...

    'document.selection' is not an object

    Eric Scheid - 21st September 2003 06:49 - #

  8. Broken in Opera. Of course, due to the ugly sniffer...
    Additionally, in Opera 7.20 I have no keyboard response.

    Thomas Scholz - 21st September 2003 07:14 - #

  9. In Op7.11 it forces red into the field, no matter what you type.... you *cannot* put anything else there.

    Manu - 21st September 2003 19:31 - #

  10. So all in all, a waste of time.

    James 'Smiler' Farrer - 22nd September 2003 11:42 - #

  11. Hrm. Works fine for me in Camino....

    Andrew Wooldridge - 22nd September 2003 21:04 - #

  12. Works in
    - Mozilla 1.4 / Win2K
    - Mozilla 1.5 (RC1) / Win2K
    - IE 5.5 / Win2K
    - IE 6 / Win2K
    - Firebird 0.6.1 / Mac OS X 10.2

    Does not work, but does not break
    - Mac IE 5.2 / Mac OS X 10.2

    Does not work / page is broken
    - Safari / Mac OS X 10.2
    - Netscape 4.77 / Mac OS X 10.2 (OS 9)

    Chris Heller - 29th September 2003 23:27 - #

  13. Does not work / page is broken - Opera 7.10 / Win2k

    levin - 2nd October 2003 00:47 - #

  14. document.selection.createRange() is not working in mozilla 1.5.0. is there any alternative ways for this???

    PIPPIRI VENU - 7th March 2006 05:07 - #

  15. Re: "The biggest problem is that it breaks CTRL-A, CTRL-V, CTRL-C, etc." you can restore this functionality thus:

    add the trap function (at bottom) to the script, then wrap the main autocomplete function in

    function autocomplete(oTextbox, oEvent, arrValues) {

    if (trap(oEvent) == true)

    {}

    else

    {

    switch ...snip.../snip...

    }

    function trap(e) {

    if (!e) {

    e = event;

    e.which = e.keyCode;

    }

    try

    {

    modifierKey = e.ctrlKey || e.altKey || e.metaKey;

    }

    catch(e)

    {

    modifierKey = false;

    }

    //alert(modifierKey)

    return modifierKey || e.which == 0;

    }

    David - 8th September 2006 14:10 - #

Comments are closed.

Previously hosted at http://simon.incutio.com/archive/2003/09/20/autoComplete

A django site