2008 / September 27^th/ Select Autocompleter

A while ago I remember seeing John Nunemaker’s live search with quicksilver in jQuery and I remember thinking how cool it was that someone had finally ported Quicksilver over to Javascript (ported by Lachie Cox). Since then I’ve been dying to play with it in some form or another given Quicksilver is probably my favorite application of all time.

Introducing Select Autocompleter

So I decided to polish off some old code I had, package it up as a nice MooTools plugin. A few hours later, I pushed Select Autocompleter to github. You can see a working example here.

Basically, SelectAutocompleter is a way to handle the problem of having many items in a <select>. It also allows you a way to cheaply have rich combo boxes (say you want to show a user’s avatar next to their name).

Everything good about HTML

SelectAutocompleter is everything that I think is good about HTML. It embraces custom attributes for meta data (check out the rich list example). It degrades back to a regular <select> in the case users don’t have Javascript. And it submits forms just as if there was a <select> still on the page.

Everything good about Javascript

SelectAutocompelter is also everything that I think rocks about Javascript. It’s pretty well tested using JSSpec. It uses MooTools. It publishes events (using the MooTools Event class mixin) on focus and on blur so you can extend it nicely. It uses an extremely flexible templating language that allows you to not only pass in arbitrary data for templating, but pass in arbitrary HTML markup as well. it also doesn’t force any styles on you — that’s what CSS is for.

It listens to the keyboard and the mouse wisely and feels just like a native OS widget should. You can use your arrow keys, your letter keys, and move the mouse around all at the same time. Thanks to MooTools extremely flexible event system, this is all pretty well tested as well.

Anyways — hope you have fun playing with it. It’s not 100% tested yet, and I know the CSS has some issues in IE6 still that I need to iron out — but the functionality should work in IE6, IE7, Firefox 2/3, Safari 2/3.

Example Page | Download | Browse Source

1. 

   John Nunemaker

   October 22^nd | #

   Dude, awesome. I’ve been wanting a combo-box type thing for a while but never thought of just using the options in a select. I’ll have to rewrite this in prototype or jquery.

2. 

   Javier

   October 27^th | #

   Dear John
   I need you to enter new items so when fire event onblur let the new element intact on the text box
   tks

3. 

   2008. It’s a wrap. - Warpspire

   January 9^th | #

   [...] plea to rationalize her vote. What little faith I had in our congress diminished completely. I also wrote a little javascript widget to help make your selects a little [...]

4. 

   Habib Asseiss Neto

   March 30^th | #

   Really nice! It was useful to me!
   Here’s an improvement:
   You can add:

   height: 200px;
   overflow-y: scroll;

   in .autocomplete ul.auto-dropdown so the list doesn’t get too long. It will create a scroll there.

   I had problems with IE 6 and 7 too. I’m trying to solve them.

   Thanks a lot

5. 

   Habib Asseiss Neto

   April 18^th | #

   Hi, is there a way to make the first option already selected when something is typed?
   Thank You

Name

Email (will not be published)

Website (optional)