Thursday, October 26th, 2006

Script.aculo.us Select Box

Category: Component, Prototype

Gabriel Lanzani has created a Script.aculo.us Select Box component that is meant to replace <select> with visual effects, a skinnable look, and autocomplete support.

javascript

  1. new Ajax.SelectBox(id_of_text_field, id_of_div_to_populate, url, id_of_result_value, options);

I would stay away from gratuitous use myself, but there are some usecases where it could come in handy.

Script.aculo.us Select Box

Posted by Dion Almaer at 9:42 am
31 Comments

+++--
3.1 rating from 123 votes

31 Comments »

Comments feed TrackBack URI

It’s pretty, but the response is too slow. This cannot be used in business applications.

Comment by Karl Moz — October 26, 2006

Nice
But it does not seems to work on Safari :(

Comment by seb — October 26, 2006

As a dev Safari, not IE, is the browser that always manages to break my code. I own an imac to test with and think its important to have safari support. That said… everything that’s released now-a-days is in beta. I am sure within a day or so Safari will get supported by this. 8P

Comment by Mario — October 26, 2006

It needs to cache its ajax results instead of querying the server for each click…. it = tooo slow

Comment by Mario — October 26, 2006

Slow. unresponsive, useless. The list appears one second after I click…

Comment by Andrea — October 26, 2006

Do we really have to recreate the select box to make it Ajaxified? Why break user standards just for dynamic select boxes. OR, if you want to change the select box, really change it. I’ve used a similar technique to make a color swatch chooser, but I didn’t make it look like a select box that really wasn’t a select box.

Nice concept, has uses I agree, but becareful. (but really, who hasn’t gone thru the phase of wanting re-create the wheel by making their own select box)

Comment by Ryan Lowe — October 26, 2006

looks cool …but very very slow. That latency between the click on the display is killer to usability.

Comment by Mark Holton — October 26, 2006

Ok, that is slow is one thing we know, but this is a matter of hosting it on the right server. Ajax depends on the server, so that is the only reason it is slow. Other then that; it doesn’t replace a selectbox at all. It just “generates code” that looks like a selectbox, to bad, nice try though.. 3 out of 5 rating.

Comment by Gilles — October 26, 2006

The most common problem with recreating system-level widgets (despite the effort, which I respect!), is that I have yet to see an implementation that faithfully reproduces all of the standard UI behaviours provided by the native OS-level widgets. Select boxes are one of the most difficult.

For example, if you click the “down arrow” and the list drops down, you should be able to click the down arrow again to reset it. ESC should have the same effect, and once focused/highlighted, you should be able to use the arrow keys to scroll through the items in the list.

While the example shown here looks nice, one of the challenges is taking care to recreate all of those standard behaviours. Users are used to many of them because that’s the way the OS works, so it helps to consider them when building custom widgets.

Comment by Scott Schiller — October 26, 2006

this widget is made with the use of the auto-completer so its not really a selectbox widget its an autocomplete formfield with a drop down button…… this is just something fast and small and very nice idea…

Comment by Mario — October 26, 2006

by fast i mean small….

Comment by Mario — October 26, 2006

Ryan Lowe,

Your color picker is nice but very laggy in FireFox. Nice and smooth in IE though.

Comment by Justin — October 26, 2006

I can’t wait until someone creates a div-based textbox, because that would rawk. Oh, wait, textboxes already exist.
Really, for all the above mentioned reasons, don’t ever use this, or any other version of this tool. Its like those cheesy sites that tried to recreate the checkbox using images. The browser is way better at implementing standard behaviour than you are, no matter who you are. Spend your time creating something useful.

Comment by Dan — October 26, 2006

Manso el pachi, si señor!

Comment by cHaLo_On — October 26, 2006

Yes, Agree, performance is way too slow. IE7 makes it even worser..Need to optimize to perform better

Comment by jon — October 26, 2006

soooooooooo slow

Comment by Simon Jia — October 26, 2006

Wow! That damn widget is slow! Like VIC=20 slow. Scriptaslowicious slow.

Comment by muchos slowo — October 26, 2006

Hi Dion – have to agree with most of the comments so far – why re-invent the select box. You mention that there are some usecases where this might come in handy – would you mind sharing your thoughts on where?

Comment by Grant — October 26, 2006

the obvious place is wherever a selectbox (full windowed control in IE6) might be covered or partially covered by a positioned html element (drop down menu is one I see all the time), it will be visible, whatever the z-index, precisely because it is a full windowed control. I always use a custom dhtml ‘selectbox’ to avoid this. I agree with the comment above, if you’re going to build a custom ‘selectbox’ it should behave like a selectbox.

Comment by heswell — October 27, 2006

It’s too slow = useless for anything in a business setting. sorry.

Comment by Alex93053 — October 27, 2006

Doesn’t play very nicely with IE6

Comment by Richard Kimber — October 27, 2006

This could really be pretty cool (a la the skinning) if they could speed it up a bit.

Comment by jt — October 27, 2006

muy buena aplicacion pachi! :)

Comment by Eze — October 27, 2006

Uh, I must have missed the memo… are we recreating the browser inside the browser now?

Comment by CrackWilding — October 28, 2006

Also, gleefully ignores the tab key…skips right over it. Users see something that looks like a pulldown, they expect it to act like one.

Comment by MH — October 29, 2006

For quite some time (even before prototype age) :
http://momche.net/publish/article.php?page=acdropdown

Comment by Mircho — October 30, 2006

too bad it doesn’t work in Safari

Comment by Jani Turunen — October 30, 2006

Interesting. But how about misspelled option? If I hit DELETE, my browsers jump one page back (I didn’t test the source actually, only the sample above). Same is also with an ordinary SELECT-box.

Comment by Pekka Kuuva — November 8, 2006

It’s quite fast for me.

Comment by Peter — June 24, 2007

Los unicos que posteamos en español somos amigos de pachi…

Comment by Ezequiel — August 1, 2007

It is no longer slow in IE or Firefox and works in Safari, so clearly these problems have been fixed. It works great for me. It even has some unadvertised capabilities, which you can discover by looking at the very short code (just an extension of the Scriptaculous Autocompleter.Base class). It wouldn’t hurt to have some familiarity with Scriptaculous.

Comment by Andrew Arnold — November 28, 2007

Leave a comment

You must be logged in to post a comment.