4 ms·
Make Better Select Boxes with Chosen
- PythonDeveloper 14y agoTruly awesome. Thanks for the link!
- darkpicnic 14y agoGREAT stuff
- tomelders 14y agoI'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 14y agoYou may have. I just found it this morning by clicking through a changelog blog post.
- joshmaker 14y agoIf 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 https://github.com/theatlantic/django-chosen
- WayneDB 14y agoReally 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 14y agoThere 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 14y agoNever used the library, but I did inspect the "Multiple Select" control while building something similar last year. So, thanks!
- uptown 14y agoPrevious Discussion: http://news.ycombinator.com/item?id=2793086 http://news.ycombinator.com/item?id=2793086
- tubbo 14y agowe use this all over the place. awesome lib.
- baggachipz 14y agoI 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.
- PStamatiou 14y agoWe'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 14y agoFYI, 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
- PStamatiou 14y agoYeah I remember hunting that as well some time ago
- qeorge 14y agoLeaving 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.)
- sbarre 14y agoThank you very much for showing me this! I can't vote you enough.
- deleted 14y ago[deleted]
- alexchamberlain 14y agoAwesome! Might need some work on mobile devices though.
- mshafrir 14y agoChosen.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 https://github.com/meltingice/ajax-chosen, which adds much-needed Ajax support to Chosen.js.
- thwap 14y agoI've used this before but it took a lot of fiddling to get the desired functionality out of it.
- trebuch3t 14y agoAgreed. 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.
- PStamatiou 14y agoLikewise Michael - took a bit of poking around to edit simple UI things.
- kennystone 14y agoYeah it suits Harvest perfectly but as a general purpose library is has some big limitations.
- Toshio 14y agoI'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).
- ericson578 14y agoDon't forget about mobile! How this these select boxes work on ios or android?
- rglover 14y agoIt 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.
- exratione 14y agoI'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-selects/ 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.
- zobzu 14y agoIt'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 14y agoNevermind the fact that for certain situations the UX is improved 10 fold over native.
- zerop 14y agoThanks for sharing it, had not seen it. It looks like Quora's topic selector.
- pimeys 14y agoI'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 14y agoIf you have selects with thousands of items, you really need a better navigation scheme than a select box, even if it does have search.
- michael_fine 14y agoWhat I prefer to this is https://github.com/JamieAppleseed/selectToAutocomplete 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.
- jeffgreco 14y agoReally 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.
- goo 14y agoWe 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.
- 10dpd 14y agoSorry 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 14y agoSimilar 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 14y agoShould 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 14y agoI can't even scroll the list on iPad not sure if everyone experiencing the same.
- repsilat 14y agoYeah, 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).
- nerdo 14y agoMulti-select is much less usable unfortunately (no ctrl/shift click, no drag-click).
- soulclap 14y agoThere is a newer project named Select2 now which handles remote data sets and offers infinite scrolling: http://ivaynberg.github.com/select2/ http://ivaynberg.github.com/select2/ (Tried to submit it as a story the other day but zero upvotes.)
- alecdibble 14y agoThanks!
- tiglionabbit 14y agoIf 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.
- scoot 14y agoNice! 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>
- gouranga 14y agoThanks! This is considerably smaller than I expected it to be as well (7KiB minified) which is an acceptable size to chuck into our site.
- vevmesteren 14y agoThis is quite useful for those that feel jittery for having used the same password all over the place: http://leakedin.org/ http://leakedin.org/ it allows you to check wether your password is among the leaked ones.
- kbanman 14y agoThis has nothing to do with the article.
- jcbmllgn 14y agoThis 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?
- nfomon 14y agoSome nice features, but looks like a basket of usability bugs and glitches to me. Also it's way slower.
- gshakir 14y agoWe had to enhance it to allow "New Item" in case you had to add a new item to the existing list.
- mkmcdonald 14y agoThe 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.
- wookiehangover 14y agoSince when is having a page work without JavaScript "something special"? Good to know that "graceful degradation" is impossible if you use jQuery or Prototype... IMO if you're not using a DOM library in 2012 you're doing it wrong (if you say something like "the DOM is great and totally sufficient to do everything I'll ever need" you're either full of shit or trying to sell me something).
- DrJokepu 14y agoI 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 14y agoI 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.
- asmosoinio 14y agoPretty broken when browsing on android browser... The standard ones work much better.
- joaosoares 14y agoAs 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?
- xxiao 14y agogreat stuff, bookmarked for next project.
- ComputerGuru 14y agoWe'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.
- wilfra 14y agoThese 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 http://i.imgur.com/ixqa6.jpg
- thevdude 14y agoI'm a fan of the look of the transient scrollbars, not so much that they disappear though.
- Raphael 14y agoWhat ugly blue scrollbar? Do you mean your OS native scrollbar?
- wilfra 14y agoYes.
- wavephorm 14y agoIf 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.
- kahoon 14y agoNice, though it doesn't expand in the upper direction when it has no space downwards.
- kposehn 14y agoThis looks extremely useful - we have several production projects which I'd like to use it on. Thanks for making!
- nollidge 14y agoAnybody know of a decent library for numeric up/down spinners?Some browsers do them automatically, but not all.
- mcrittenden 14y agoI'm curious what you mean by "numeric up/down spinners"...can you clarify?
- roryokane 14y agoHe 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://www.html5tutorial.info/html5-number.php
- deleted 14y ago[deleted]
- nollidge 14y agoYep, that's what I meant. The default implementations leave a lot to be desired. Tiny buttons, for one thing, at least on Safari.
- titel 14y agohttp://jquerytools.org/ http://jquerytools.org/ includes a comprehensive implementation of the unimplemented HTML5 form elements; definitely worth checking out.
- rthomas6 14y agoI had noscript enabled and was really confused at first.
- igul222 14y agoOn 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.
- pierreten 14y agowrong and gay and broken
- aethr 14y agoWe 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.
- asher_ 14y agoI'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.
- rafekett 14y agoThis 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.
- Tomis02 14y ago> All modern browsers are supported (Firefox, Chrome, Safari and IE9). No Opera?
- benguild 14y agoI see no difference on iOS, but also incorrect data....