Make Better Select Boxes with Chosen(harvesthq.github.com)
harvesthq.github.com
Make Better Select Boxes with Chosen
http://harvesthq.github.com/chosen/
45 comments
> 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.
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 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.
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.
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.
> All modern browsers are supported (Firefox, Chrome, Safari and IE9).
No Opera?
No Opera?
I see no difference on iOS, but also incorrect data....
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.
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.
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.
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!
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:
@$("#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.
$(".recipient_relation").chosen disable_search_threshold: 10
@$("#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.
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]'.
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
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 .highlightedLeaving this here in case it helps someone:
In Firebug, you can ask the :hover state to stay active.
(Apparently this feature has been there for a long time, but I only found it recently. Changed my Firebug life.)
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
(Apparently this feature has been there for a long time, but I only found it recently. Changed my Firebug life.)
Yeah I remember hunting that as well some time ago
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.
Also worthwhile checking out https://github.com/meltingice/ajax-chosen, which adds much-needed Ajax support to Chosen.js.
Yeah it suits Harvest perfectly but as a general purpose library is has some big limitations.
Likewise Michael - took a bit of poking around to edit simple UI things.
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?
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.
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.
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.
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.
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.
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.
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.
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!
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).
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.)
(Tried to submit it as a story the other day but zero upvotes.)
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
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>
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.
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.
Thanks!
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.
it allows you to check wether your password is among the leaked ones.
This has nothing to do with the article.
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?
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.
Pretty broken when browsing on android browser... The standard ones work much better.
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?
great stuff, bookmarked for next project.
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.
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
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.
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.
Nice, though it doesn't expand in the upper direction when it has no space downwards.
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.
http://jquerytools.org/ includes a comprehensive implementation of the unimplemented HTML5 form elements; definitely worth checking out.
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
[deleted]
I had noscript enabled and was really confused at first.
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.
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.
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 http://www.erichynds.com/jquery/jquery-ui-multiselect-widget... recently, it has a lot of options and works really well.
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.
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.
> 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.