
Make Better Select Boxes with Chosen - tomschlick
http://harvesthq.github.com/chosen/
======
soulclap
There is a newer project named Select2 now which handles remote data sets and
offers infinite scrolling: <http://ivaynberg.github.com/select2/>

(Tried to submit it as a story the other day but zero upvotes.)

~~~
gouranga
Thanks! This is _considerably_ smaller than I expected it to be as well (7KiB
minified) which is an acceptable size to chuck into our site.

~~~
WA
Where did you get a 7KiB version from? If I download Select2, the
select2.min.js file has 22KB

~~~
gouranga
select2-2.0.zip contains a file select2.min.js which is 7KiB gzipped (it's
22KiB uncompressed). I should have stated that was the compressed size.

------
10dpd
Sorry but this experience is badly broken in iOS and highlights yet again why
native controls are always preferable over custom controls for compatibility.
Also, don't forget about enabling accessibility by using ARIA.

~~~
zootm
Similar on Android; the widget behaves perfectly, which is ironically a poor
experience on mobile.

Looks like it would be very nice on a desktop though!

~~~
repsilat
Should these sorts of widgets be the default implementation of those types of
controls in desktop browsers? As long as they can be done with the same input
information, this sort of input seems like a "user preference" issue.

~~~
sourc3
I can't even scroll the list on iPad not sure if everyone experiencing the
same.

~~~
repsilat
Yeah, that's why you do it on the client-side. If the widget doesn't work on
an iPad then an iPad browser shouldn't default those controls to that widget.
A desktop browser could, though Nobody would be worse off, and nobody would be
the wiser (except the user).

------
PStamatiou
We've been using this for what feels like 9 months with Picplum. One thing we
did is for on select menus with few items, we hide the search box:

    
    
      $(".recipient_relation").chosen disable_search_threshold: 10
    

And if in Backbone you'd like to have it preselect the value, run something
like this after render (so you don't have to add much logic to your handlebar
template for the markup):

@$("#address_country_field option").each -> $(@).attr "selected", "selected"
if self.model.get("address_country") is $(@).val()

It'd be nice to see some folks share their menu styles. The gradient on the
select doesn't quite fit in with all site styles.

~~~
nailer
FYI, I had to go finding this the other day - it's tricky as mousing out
removes the class. Anyway, it's:

    
    
        .chzn-container .chzn-results .highlighted

~~~
qeorge
Leaving this here in case it helps someone:

In Firebug, you can ask the :hover state to stay active.

    
    
        1. HTML tab
        2. Click on the element
        3. Style menu on the right panel
        4. choose :hover
    

It tricks the browser into thinking the mouse is really over the element
(i.e., it doesn't just add :hover), so if you have a hover class added via JS
that should work too.

(Apparently this feature has been there for a long time, but I only found it
recently. Changed my Firebug life.)

~~~
icoloma
There is an icon to do the same in the CSS tab of chrome inspector

------
mshafrir
Chosen.js has a great UI, but I found it challenging to do customizations to
the library. I wish that the authors of the library had exposed more event
hooks or built it with more modularity.

Also worthwhile checking out <https://github.com/meltingice/ajax-chosen>,
which adds much-needed Ajax support to Chosen.js.

~~~
thwap
I've used this before but it took a lot of fiddling to get the desired
functionality out of it.

~~~
trebuch3t
Agreed. I tried for a few days before giving up. Unless you're happy with
Chosen's default options you'll spend days trying to customize it.

------
aethr
We used Chosen in an Australian news site which targeted South East Asia and
Pacific island nations. 4 of the 11 language streams on the site relied on
@font-face embedded fonts to provide support for displaying East Asian
languages (Khmer, Burmese, etc).

Chosen helped us overcome a fairly major multi-browser issue where embedded
fonts weren't being used inside <select> elements (oddly it seemed to work in
IE6 but not IE7). Since Chosen transmutes the <option>s into style-able divs,
this allowed us to use our @font-face fonts with very few issues. We ended up
using it across the site for consistency (with a few exceptions) and all in
all I think it provided a usability improvement for most of our users.

------
pimeys
I've been using this a lot in our projects. It would be really a killer for
selects with thousands of items. But it really kills the performance at least
with Firefox. For small country selects it's still fine.

~~~
SoftwareMaven
If you have selects with thousands of items, you _really_ need a better
navigation scheme than a select box, even if it does have search.

------
mkmcdonald
The project "rationale" has a lot of holes in it.

> Instead of forcing your users to scroll through a giant list of items, they
> can just start typing the name of the item they were looking for.

Who's forcing? Modern browsers allow a user to type (in lowercase) text to
find in a select element while focused and will scroll to an exact match
inside of it. It would require some instructions, but deviations of that
behavior have been around for a while.

> Because chosen replaces normal html select fields, you don't need to do
> anything special to make it work for browsers without JavaScript.

One definitely needs to do "something special" to make them work. Limiting
options to massively bloated libraries like jQuery and Prototype is a big
problem, especially for graceful degradation (impossible with both).

I'd be interested in something that works without a DOM library (definitely
not impossible). Support beyond IE 8 would be a great idea as well.

~~~
DrJokepu
I don't think 'massively bloated' is a fair way to describe either jQuery or
Prototype. Both of these libraries offer a lot. A better way to say it would
be 'picked up some weight recently'.

That being said, I agree that this would be better off without jQuery; when
every millisecond, every kilobyte matters, jQuery is simply off the table.

~~~
nilliams
I agree with you that 'massively bloated' is a huge overstatement, and this
plugin is clearly intended for desktop-style apps as an improvement to the
default desktop-browser's select element. In desktop-land the 32kb it takes to
download jQuery (min+gz) is absolutely nothing, and easily overshadowed by a
single image file.

Perspective: My company has a jQuery/jQueryUI single-page web app (with MVC
underpinnings) which serves a number of commercial customers very
successfully. Does it matter that the whole app (which includes this plugin)
may take 2-10 seconds to load from a cold-cache? No. After that there is
absolutely zero load time throughout the entire app.

Btw, we also don't care about oldIE because we can insist commercial customers
install Chrome-frame, which they are generally happy to do. They'd much rather
that than we push a new 'native' desktop app at them and require them to
install a .NET or Java runtime.

I wish people moaning about bloat and browser-support would actually think
about the developers out there building products for very really use-cases
that don't match their own mythical high-expectations of 'zero
footprint/works-everywhere'. Some of us just want to get work done for paying
clients and plugins like this are absolute life-savers.

------
exratione
I'll agree with others that it isn't the easiest thing in the world to
customize. Here's a hacky approach I threw together under time pressure to
reshade it for dark sites, for example:

[http://www.exratione.com/2011/12/a-dark-style-for-chosen-
sel...](http://www.exratione.com/2011/12/a-dark-style-for-chosen-selects/)

Way too much CSS, but I guess that's par for the course considering how much
is going on inside the thing.

------
nerdo
Multi-select is much less usable unfortunately (no ctrl/shift click, no drag-
click).

------
michael_fine
What I prefer to this is
<https://github.com/JamieAppleseed/selectToAutocomplete>, because of the fuzzy
matching. For example, I can type US or UAE, and it will select United States
and United Arab Emirates respectively. But both of these are a great step in
getting rid of unwieldy and uselessly long lists.

------
uptown
Previous Discussion: <http://news.ycombinator.com/item?id=2793086>

------
zobzu
It's nice looking and mostly functional but I always miss the native elements.

The thing is, when I see an OS-native-looking element I know immediately what
it is.

For the skinned stuff, while it looks nice to the eye, it takes longer. When
we're browsing thousand of pages a day it's kind of something you notice.

~~~
hexvector
Nevermind the fact that for certain situations the UX is improved 10 fold over
native.

------
ComputerGuru
We've been using it for some time now, but it renders differently across
different browsers with subtle alignment and padding issues. In the end, we
just disabled it on anything less than IE8 and not one of the major web
rendering engines. But it's pretty.

------
rafekett
This is a great piece of software in terms of presentation and ease of use.
However, it can make your life difficulty if you want to do anything outside
of the scope that the authors intended. It's very difficult to build dynamic
UIs with chosen select boxes because there's zero documentation of the code
itself, which is what you'll be modifying if you want to do anything advanced.
The devs did a good job building a select box, but a bad job making it
extensible and documenting it.

Overall, I'd recommend it if your needs are simple, but you might be better
off rolling your own or using another library if you need anything advanced.

------
baggachipz
I agree with the consensus that this is a nifty control. That being said, I
have had major performance problems when using it with a large set of items in
the choice list. Any more than a couple hundred, and it's gonna chug.

------
joaosoares
As awesome as they may be, they break the default Mobile Safari view for
forms. Related to this, I ask honestly, why or why not should element design
and usability be a responsibility of browser vendors?

------
igul222
On my iPhone (and most other mobile browsers I'd assume), the default controls
beat Chosen's controls every time. There's a reason control implementation is
left to the browser. If you do use Chosen, be careful to disable it on mobile.

------
asmosoinio
Pretty broken when browsing on android browser... The standard ones work much
better.

------
joshmaker
If you are a Django user, you should checkout django-choosen which makes it
easy to use Chosen in your admin: <https://github.com/theatlantic/django-
chosen>

------
asher_
I've been using [http://www.erichynds.com/jquery/jquery-ui-multiselect-
widget...](http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/)
recently, it has a lot of options and works really well.

------
ericson578
Don't forget about mobile! How this these select boxes work on ios or android?

~~~
rglover
It works exactly like it does in the browser, meaning, on iOS/Android it
doesn't toggle the default OS action for select boxes. A real bummer
considering it looks great.

------
jcbmllgn
This looks a lot like 99lime.com's HTMLkickstart. The js & html for 99Lime's
"Select.fancy multiple" is really similar (if not identical) to Chosen's
plugin. Did Harvest build 99Lime?

------
jeffgreco
Really wanted to use this on a recent project, but found the appearance to be
too inflexible. Would really like the ability to adjust the height of the
element easily.

------
rthomas6
I had noscript enabled and was really confused at first.

------
goo
We use this in our admin section. It's definitely a time saver and a sweet
tool, although appearance and behavior customizations are a bit of a pain.

------
tomelders
I've been using this for a while. Could have sworn I found it on HN.

Anyway, great utility, extremely useful and could well be the way native drop
downs should work.

~~~
tomschlick
You may have. I just found it this morning by clicking through a changelog
blog post.

------
kposehn
This looks extremely useful - we have several production projects which I'd
like to use it on. Thanks for making!

------
nollidge
Anybody know of a decent library for numeric up/down spinners?Some browsers do
them automatically, but not all.

~~~
mcrittenden
I'm curious what you mean by "numeric up/down spinners"...can you clarify?

~~~
roryokane
He probably means newer browsers’ rendering for the HTML5 <input
type="number">. Spinners are the little up/down arrows next to number fields
that increment/decrement the number. More info:
<http://www.html5tutorial.info/html5-number.php>

------
nfomon
Some nice features, but looks like a basket of usability bugs and glitches to
me. Also it's way slower.

------
gshakir
We had to enhance it to allow "New Item" in case you had to add a new item to
the existing list.

------
kahoon
Nice, though it doesn't expand in the upper direction when it has no space
downwards.

------
zerop
Thanks for sharing it, had not seen it. It looks like Quora's topic selector.

------
Tomis02
> All modern browsers are supported (Firefox, Chrome, Safari and IE9).

No Opera?

------
vevmesteren
This is quite useful for those that feel jittery for having used the same
password all over the place: <http://leakedin.org/>

it allows you to check wether your password is among the leaked ones.

~~~
kbanman
This has nothing to do with the article.

------
benguild
I see no difference on iOS, but also incorrect data....

------
alexchamberlain
Awesome! Might need some work on mobile devices though.

------
darkpicnic
GREAT stuff

------
Toshio
I'm also using this and would like to point out that by default chosen does
its instant search using "begins with"-type semantics. To get chosen to do the
search using "contains"-type semantics you have to activate a little switch
like this: .chosen({search_contains: true}); which isn't immediately obvious
from the docs (I had to sift through their issues on github to discover this).

------
WayneDB
Really good stuff!

The only thing I find missing is that, with the keyboard on a multiple select
box, I can't remove my 1st choice without having to remove my 2nd choice too.
(So, for instance if I choose Polar Bear and also choose Brown Bear, I try to
move my cursor between them in order to Backspace over Polar Bear but I can't.
I have to Backspace over Brown Bear + Polar Bear in order to delete Polar
Bear.) It would be nice if, when I used my direction keys, it would highlight
the selected items individually and then let me hit Delete or Backspace on my
keyboard to delete just that one.

~~~
tomschlick
There appears to be several pull requests related to keyboard controls. I
haven't looked into any of them in depth but one of them may solve the issues
you are talking about.

------
moron
Never used the library, but I did inspect the "Multiple Select" control while
building something similar last year. So, thanks!

------
wilfra
These are sexy.

If you are looking for ideas, it would be really cool to see an improved
scrolling of some kind. Still feels 1.0 with the ugly blue scrollbar.

Something like this but with softer colors:

<http://i.imgur.com/ixqa6.jpg>

~~~
Raphael
What ugly blue scrollbar? Do you mean your OS native scrollbar?

~~~
wilfra
Yes.

------
PythonDeveloper
Truly awesome. Thanks for the link!

------
tubbo
we use this all over the place. awesome lib.

------
xxiao
great stuff, bookmarked for next project.

