Gadgetopia

Looks Great in Firefox/Linux. Thank You for the code!

It kinda works in Safari and FireFox in OS X; type in a letter or two and you get a list, but the arrow keys don't do the trick. You either need to keep typing or pick from the list with the mouse.

Just what I needed. Simple and to the point. MANY thanks.

great work!

That's a nice script. There's a bit of a usability flaw though in the fact that hitting "enter" doesn't select the currently highlighted item (it submits the form instead) - hitting tab isn't nearly as intuitive.

Wow, I was just about to plunge into this XMLHttpRequest thing and this server as a great example. Thanks!

Next step: Ajax support. :)

Ajax support would actually a pretty simple addition. This time around, I had a static list of only a few thousand items, so round-tripping the server was overkill. It was the right architecture decision, but not supporting the latest buzzwords means that the cool kids won't let me sit at their table in the lunchroom. :-)

There's a function called getEligible that gets called to read the user input and build an array of eligible suggestions that will be used to build the div. Right now that function just loops an array to find its suggestions. Replace that with an xmlHttp call, and you can slap an official Ajax®logo on it.

The script is great, but it has some problem when you're typing capital letter by using Shift. I suggest to add a variable for SHIFT: var SHIFT = 16; and then add a case for keyUp: elem.onkeyup = function(ev) { var key = me.getKeyCode(ev); switch(key) { //The control keys were already handled by onkeydown, so do nothing. case SHIFT: case TAB: case ESC: case KEYUP: case KEYDN: return; default: if (this.value != me.inputText && this.value.length > 0) { me.inputText = this.value; me.getEligible(); me.createDiv(); me.positionDiv(); me.showDiv(); } else { me.hideDiv(); } } };

Thanks for the great example code. Here's an enhancement.

I have forms where input can contain comma/space separated list and I wanted auto-suggest for each item, not the input as a whole.

// A holder for prior string in cases where multiple values are used
this.preserveStr = new String();

// Add two new keycode constants
var COMMA = 188;
var SPACE = 32;

//Add to switch statement in onkeydown function

            case COMMA:
            me.hideDiv();
            break;

            case SPACE:
            me.hideDiv();
            break;

// Change the if statement in onkeyup to

        if (this.value != me.inputText && me.getMatchStr(this.value).length > 1)
        {
            me.inputText = me.getMatchStr(this.value);
            me.getEligible();
            me.createDiv();
            me.positionDiv();
            me.showDiv();
        }

//Add a new function getMatchStr
    /********************************************************
    Offer Suggestions for each item in a comma/space separated
    list.
    ********************************************************/
    this.getMatchStr = function(inputStr)
    {
        var regex = /[\s,]/;    
        var finalStr = new String();

        if (inputStr.match(regex))
        {
            matchArray = inputStr.split(regex);
            finalStr = matchArray[matchArray.length-1];
            this.preserveStr = inputStr.substr(0,inputStr.length - finalStr.length);
            return(finalStr);
        }
        //If no special handling, the original string is good enough
        return(inputStr);
    };


//Finally alter the useSuggestion function to

this.elem.value = this.preserveStr + this.eligible[this.highlighted];

Thanks for the submissions, guys. A number of people have sent me emails with hacks as well, and I wound up writing an "Ajax" version for a project I worked on. Sometime in the next few weeks I'll try to compile up everyone's suggestions into a new package, and perhaps even a new version of the code.

Just to update, since I've received quite a few emails: I'll try to get a new version of autosuggest put together by next Monday (6/13). I'd like to incorporate all of the suggestions that have been posted, without making the code too confusing, since the whole idea of this script is 'hackable'. You guys have provided a lot of great submissions.

This thing is sort of a little project now, so I'm not sure how to best hand it over to the community. A wiki? A Trac site? I'm open to suggestions.

I'd love to see your changes. I've started adding some performace changes to it as well and would love to return my contributions once I'm sure they are stable.

How about putting the project up on SourceForge where developpers can access it via CVS (I know - just a couple of files, but still.... ) and make their changes. And you can still maintain control of it.

What about a field that keeps track of an index in the main array? So you know which item the user selected. (Can't look through the array based on strings because there might be duplicates)

This is a great little script. I"m anxious to see the AJAX code because I have run across your site in researching that exact solution.

Let me know if you need any help.

There seems to be a bug with the div window not popping up when typing too fast...does anyone else get this?

I am unable to download the proper ZIP file, so if some one emails me the script at jigaruu@indiatimes.com id, i will be thankful to them,

Regards, jigaruu....

I am getting an error while tring to unzip the download files. Its telling me the zip file is corrupt. Can someone send me a good copy?

tom@drellishak.com

same error for me :/

If the download link is still broken, you can grab the javascript source from http://gadgetopia.com/autosuggest/autosuggest.js