Make Better Select Boxes with Chosen | Hacker News Reader

Make Better Select Boxes with Chosen

harvesthq.github.com

514 pointstomschlick83 comments

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

Thanks!

If I click on one of these and select something then the next time I click it just flickers instead of opening. I think they have something wrong with their event handlers.

Nice! Thanks for sharing - with HN as with anything it's as much chance and timing as anything else as to whether a post gets up-voted or sinks unnoticed. </meta>

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.

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

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.

probably gziped

edit:ops had this in my tab opened since morning and commented without refreshing

I had some trouble viewing data members that were longer than the select box, they would wrap down to a second line and overlap the next entry. I also could not use the mouse to scroll through the list and using the up and down arrows was sluggish. I am dealing with a very large list, but the original chosen seems to handle it pretty well.

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.

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!

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.

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

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

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.

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

Yeah I remember hunting that as well some time ago

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

Thank you very much for showing me this! I can't vote you enough.

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

Is the element you are binding chosen to visible from the start? I'm finding that chosen does not like to be bound to an element until it is visible.

I tend to do a lot of setup on render of fields that are hidden and displayed later in the same view, but chosen throws an error on 'searchfield[0]'.

Correct, it's called after render puts the view into the DOM

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.

Yeah it suits Harvest perfectly but as a general purpose library is has some big limitations.

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

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.

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.

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.

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.

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.

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.

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.

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

Additionally they always highlight item that begins with typed letter. Because of that in default combobox i can type only "po" to get Poland, whereas search after typing "po" highlights French Polynesia. I think that difference is worth noting because it may searchbox more or less useful depending on data.

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.

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

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.

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

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.

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

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.

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.

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.

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?

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.

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

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

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

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

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.

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?

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.

I had noscript enabled and was really confused at first.

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.

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.

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

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

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

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

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

http://jquerytools.org/ includes a comprehensive implementation of the unimplemented HTML5 form elements; definitely worth checking out.

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

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

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

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

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

No Opera?

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.

This has nothing to do with the article.

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

Awesome! Might need some work on mobile devices though.

GREAT stuff

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

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.

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.

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

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

I'm a fan of the look of the transient scrollbars, not so much that they disappear though.

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

Yes.

If you use Chrome or Safari on MacOS 10.8, they uses the new mini-scrollbar in the browser. Removing those old-fashioned scrollbars dramatically improves the look of web UI's.

Truly awesome. Thanks for the link!

we use this all over the place. awesome lib.

great stuff, bookmarked for next project.

Reply on news.ycombinator.com