
Chosen: A javascript plug-in that makes long select boxes user-friendly. - utkarshkukreti
http://harvesthq.github.com/chosen
======
pilif
And yet another control that pretends to be a dropdown box, but isn't. No. I'm
not complaining about the appearance or the fact that it has a search field
while the real dropdown doesn't.

I'm complaining about the way it responds to mouse actions: The real dropdown
box, on my machine, expands the menu on mouse down after a no-doubt OS-
specific delay. The fake dropdown doesn't - it only reacts on mouse up.

Of course, you can't make a a control work exactly like its native counterpart
- but that IMHO just means that you shouldn't even try imitating them and
provide its own unique look.

I really dislike nearly-native controls - they feel wrong to me.

But don't get me wrong: The controls are really cool and incredibly useful. If
only they didn't try to mimic the native look without quite matching it.

~~~
systemizer
My problem with this is that when I see the box (e.g. Multiple Select), I
perceive it as a text input. I'd be ill-surprised to discover on a site to
(all of a sudden) have this protruding box appear out of nowhere.

Better solution: on mouse click, hide the box. Only show the box for
autocompletes.

~~~
camiller
When we do this (with jQueryUI) we add the little down arrow button decoration
so you expect the dropdown to appear.

------
philfreo
This project looks awesome. This stuff is annoying to have to replicate
yourself, and I'm glad to see MooTools support as well.

That said, my first reaction when looking at the first Country dropdown
example was that I liked the native one better since in OS X it shows me
dozens of choices at once (fills most of the screen vertically) and then in
the "after" suddenly I was constrained to only seeing 7 countries at a time.
Not a huge deal but felt like a loss in usability (but a gain visually). If
the faux dropdown was just a little taller in height it'd be better.

Secondly, this just killed iPhone support. Apple did a good job with <select>s
on iOS and this completely breaks it. It should just turn itself off on iOS.

~~~
dazmax
The single select also cannot be reached by pressing the tab key (for me,
Safari 5.0.5). When I fill out a form, my hands are on the keyboard. I tab to
the country field, start typing my country to select it, and move on. So I'd
say the single select is worse than native on both Safari and Mobile Safari.

The multi-select is great, though. Why not make the single select work like
the multiple?

~~~
icebraining
Tab works as expected here in FF4.0.1, when the focus is on the normal
control, I can switch to the 'enhanced' version using tab and start typing my
country.

------
romaniv
The more libs like this I see, the more I feel that the core HTML controls
should be improved and expanded. They are getting really, really dated and
don't address a lot of common problems.

Things I feel would make a lot of sense:

Collapsible trees. Numeric sliders (preferably done like draggable digits
<http://worrydream.com/Tangle/>). Native drag-and-drop sipport for elements.
(And yes, this _can_ be done with plain forms. I can explain how if you want.)
Native rich tooltips and a standard notation to show that something has a
tooltip. Maybe tabs. I think you could do tabs with CSS, but I'm not 100%
sure.

If most UI libraries have something, it probably would be a good addtion to
HTML spec. It would work faster and eventually have better compatibility.

~~~
xutopia
Numeric slider exists in HTML5: <http://diveintohtml5.org/examples/input-type-
range.html>

------
hendrik-xdest
Best plug-in of the year, so far.

Apart from what it says, I do not see problems in IE7 or IE8 (there is some
style issues in IE9, though). Also, it is nearly working in IE6. I think I'll
try to diddle around with some z-index and CSS stuff to get it working. Can't
be much more than that.

~~~
Joeboy
What's the nature of the nonworkingness on the dodgy browsers? Does it fail
catastrophically or degrade satisfactorily?

If you manage to fix it for other browsers I hope you push your fixes
upstream.

~~~
hendrik-xdest
It looks to me as if there is a z-index problem and the position is not upheld
correctly in IE6. In IE9 there is a difference in the linear gradient color.
No catastrophes there, imho.

------
geuis
This nearly completely breaks the select ui on iOS. It should do some kind of
feature detection so that it can disable itself on browsers that have
alternate ui's for controls like this.

For example, this converts a select menu to an input field. On iOS the
keyboard comes up instead of the select control.

~~~
powrtoch
This just seems like a matter of preference to me. It works on iOS pretty much
just like it works on a desktop. It may be that some iOS users would prefer
the native UI, but you could say the same for some desktop users (particularly
keyboard-wary ones). I certainly wouldn't call anything "broken".

~~~
philfreo
It's broken. When I tapped it the element the dropdown part of it didn't come
up on the screen. The only way to scroll inside it is to do the 2 finger
scroll, which 90% of users wouldn't know how to do (since normally you do a 1
finger).

On the desktop the element still feels like a <select>. On the iPhone it feels
nothing at all like a <select>

~~~
richbradshaw
I believe that on iOS5, the 2 finger scroll has been removed and replaced with
a 1 finger one.

------
thristian
Apparently Chosen takes the placeholder text from the select element's 'title'
attribute; does it also support the official HTML5 syntax[1] for placeholder
attributes in select elements?

How about integration with jQueryUI's theming system?

[1]: [http://www.whatwg.org/specs/web-apps/current-
work/multipage/...](http://www.whatwg.org/specs/web-apps/current-
work/multipage/the-button-element.html#placeholder-label-option)

~~~
philfreo
It'd be better if it looked for the HTML5 "placeholder" attribute even in
older browsers rather than having to use "title" also. Some JS plugins [1] do
this to replicate placeholder support in older browsers and I don't think
there's any downside.

[1] <https://github.com/mathiasbynens/Placeholder-jQuery-Plugin>

~~~
thristian
The trouble is that no version of HTML (currently) allows a "placeholder"
attribute on a select element, even HTML5. If you want your pages to validate,
@placeholder won't do the trick.

~~~
philfreo
Ah gotcha, wasn't thinking about <select>s. Makes sense.

------
skrebbel
Excellent. Makes you wonder why browser vendors never improved on the
usability of such controls themselves.

~~~
dave1010uk
Some do. Maemo's MicroB browser shows this when you click on a select menu:
<http://i.imgur.com/rP6Mz.png> \- one of the few places interacting with a
website is actually easier and faster on a mobile than on a desktop browser. I
think Nokia's Symbian devices do this too.

------
Inufu
Um, what use this?

If I click on a dropdown box, I can already type the value on my keyboard to
select it. No javascript necessary.

(using chromium on ubuntu)

~~~
drgath
I agree, but 99% of the users out there don't know that. :\

------
ww520
This is fantastic. ComboBox is what's missing in HTML. This is a keeper.

~~~
dave1010uk
HTML5 has the datalist element, which provides suggestions for an input box
and is similar to a combo box. The best info I can find on it is:
[http://dev.opera.com/articles/view/an-html5-style-google-
sug...](http://dev.opera.com/articles/view/an-html5-style-google-suggest/)

This is currently only supported by Firefox Opera. A JavaScript polyfill to
get this working in other browsers would be great.

------
mickeyben
For the multiple select, I like this one a lot: <http://loudev.com/>

It's way simpler for the average user.

------
fooyc
The UI widgets like this all have the same defects:

1\. They are slow, as all their markup has to be generated on the client side
each time the page loads

2\. They are not ajax friendly. I mean that if you insert a select box in a
HTML document with javascript, it will remain a plain native select box unless
your script specifically calls the right widget's function. So you have to
update all your scripts.

3\. They are not drop-in replacements for native widgets, all your script must
know how to handle these widgets for things like getting the widget's value,
listening for events, etc.

Points 1 and 2 could be fixed by generating the widget's HTML code on the
server side and using delegated events (like jQuery's delegate()).
(Progressive Enhancement can still be achieved without doing _everything_ on
the client side.)

Other than that, the idea of a text input on the top of the options list is
awesome.

------
PhrosTT
I've been using the jQuery UI ComboBox for a while, it's essentially this. -
<http://jqueryui.com/demos/autocomplete/combobox.html>

------
d0m
I would also add a fuzzy matching. I.e. "unitd sta" should match "United
States" even with the missing "e". Or "East coast" should match "The East
Coast".

------
InclinedPlane
Love it! Sure it's not perfect, but it's a huge improvement already. I've had
similar ideas myself but haven't gotten around to implementing them. The
existing HTML input controls are clunky and haven't kept up with the pace of
web development, maybe we can improve on them using CSS & JS until we develop
a new set of canonical input primitives that then become standardized.

------
myworkipad
On the iPad, the custom control is decidedly worse. The native one is larger
and more appropriate for the device. This idea of custom UI elements seems
really bad. It's gonna be worse than native on any platform. The issues with
native controls should be addressed on their respective platforms.

------
koblas
I think it's pretty cool, though it would be nice if they had a simplified
single selection version. Which is to change a single select list into a text
field with "instant search". The current incarnation make me first go for the
pull down rather than just tabbing over and start typing.

------
tomelders
This plugin makes the case that this sort of functionality should be
implemented into browsers very well.

------
piquadrat
So... why don't they use this thing on their own web app? The "Project / Task"
select box becomes very unwieldy with a growing client base. I spend way too
much time looking for the correct project almost every time I have to create a
new entry.

~~~
whacker
Because the plugin is written by a github user, not github themselves.

------
andos
Writing good widgets from scratch is an endless task. It's missing ARIA roles:
<http://www.w3.org/TR/wai-aria/roles#combobox>

------
naeem
Sexy! I do agree with a previous comment that the more technologies like these
that come out, the more apparant it becomes that HTML as a whole needs a long
overdue makeover.

------
exch
The first sentence on the linked page has a typo: "javsacript"

------
shawndumas
_Note_ : IE8 (and lower) support is done via Chrome Frame.

~~~
fooyc
Does it means this doesn't work on IE when Chrome Frame is not installed ?

~~~
storborg
I just verified that it works in IE8 without Chrome Frame. I think what they
mean by "legacy support is enabled" is "it's fugly but it works."

------
bane
Hopefully some of these ideas will end up in dojo/dijit (a couple similar
takes are already there).

I really like the multi-select control.

------
MaurizioPz
I think this is great and would like it to be a browser extension so that I
can use it all over the web

~~~
goo
That looked like a cool project, so here:

<https://github.com/gk777/Easy-List-Select>

Unfortunately, I don't think it's as good as I thought it would turn out to
be, but it's definitely neat.

EDIT: it's a chrome extension BTW

------
gorm
Does anyone know if it's compatible with formalize.me? Does it work well on
android/iphone?

~~~
marquis
Works well on Android 2.1 for me here.

Beautiful plugin, bookmarking for definite future use.

~~~
dspillett
Seems OK on the default Android browser here too, though there are a couple of
non-breaking issues under Opera Mobile.

------
nerdo
Multi-select could use some work. Drag-highlighting, shift, ctrl, etc.

------
arctangent
Awesome. This is going into my UI toolkit.

------
martin1b
Wow. The results are really polished!

------
danberger
Has anyone tried this on an iPad?

~~~
e98cuenc
I did it just now. The divs that contain the choices can only be scrolled with
two fingers, a trick most users don't know about. The native select can be
scrolled with only one finger.

------
SolarUpNote
I love this. LOVE it!

