Make Better Select Boxes with Chosen (harvesthq.github.com)

Truly awesome. Thanks for the link!

GREAT stuff

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.

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

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.

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

Previous Discussion: http://news.ycombinator.com/item?id=2793086

we use this all over the place. awesome lib.

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.

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.

    .chzn-container .chzn-results .highlighted

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

Awesome! Might need some work on mobile devices though.

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.

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).

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

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...

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

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.

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

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.

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.

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.

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.

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.

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

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.)

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.