Make Better Select Boxes with Chosen • Hacker News Board

Re: Make Better Select Boxes with Chosen

#11

Post by tubbo » Wed, Jun 06, 2012, 4:43 PM UTC

we use this all over the place. awesome lib.

Re: Make Better Select Boxes with Chosen

#12

Post by baggachipz » Wed, Jun 06, 2012, 4:45 PM UTC

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.

Re: Make Better Select Boxes with Chosen

#13

Post by PStamatiou » Wed, Jun 06, 2012, 4:48 PM UTC

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.

Re: Make Better Select Boxes with Chosen

#14

Post by alexchamberlain » Wed, Jun 06, 2012, 4:56 PM UTC

Awesome! Might need some work on mobile devices though.

Re: Make Better Select Boxes with Chosen

#15

Post by mshafrir » Wed, Jun 06, 2012, 5:01 PM UTC

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.

Re: Make Better Select Boxes with Chosen

#16

Post by Toshio » Wed, Jun 06, 2012, 5:16 PM UTC

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

Re: Make Better Select Boxes with Chosen

#17

Post by PStamatiou » Wed, Jun 06, 2012, 5:26 PM UTC

mshafrir wrote: post #15

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.

Likewise Michael - took a bit of poking around to edit simple UI things.

Re: Make Better Select Boxes with Chosen

#18

Post by ericson578 » Wed, Jun 06, 2012, 5:29 PM UTC

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

Re: Make Better Select Boxes with Chosen

#19

Post by exratione » Wed, Jun 06, 2012, 5:33 PM UTC

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.

Re: Make Better Select Boxes with Chosen

#20

Post by zobzu » Wed, Jun 06, 2012, 5:34 PM UTC

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.