TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Chosen: A javascript plug-in that makes long select boxes user-friendly.

923 pointsby utkarshkukretialmost 14 years ago

30 comments

pilifalmost 14 years ago
And yet another control that pretends to be a dropdown box, but isn't. No. I'm not complaining about the appearance or the fact that it has a search field while the real dropdown doesn't.<p>I'm complaining about the way it responds to mouse actions: The real dropdown box, on my machine, expands the menu on mouse down after a no-doubt OS-specific delay. The fake dropdown doesn't - it only reacts on mouse up.<p>Of course, you can't make a a control work exactly like its native counterpart - but that IMHO just means that you shouldn't even try imitating them and provide its own unique look.<p>I really dislike nearly-native controls - they feel wrong to me.<p>But don't get me wrong: The controls are really cool and incredibly useful. If only they didn't try to mimic the native look without quite matching it.
评论 #2793285 未加载
评论 #2793889 未加载
评论 #2793568 未加载
评论 #2793272 未加载
评论 #2796236 未加载
评论 #2794702 未加载
评论 #2794195 未加载
评论 #2795462 未加载
评论 #2793278 未加载
philfreoalmost 14 years ago
This project looks awesome. This stuff is annoying to have to replicate yourself, and I'm glad to see MooTools support as well.<p>That said, my first reaction when looking at the first Country dropdown example was that I liked the native one better since in OS X it shows me dozens of choices at once (fills most of the screen vertically) and then in the "after" suddenly I was constrained to only seeing 7 countries at a time. Not a huge deal but felt like a loss in usability (but a gain visually). If the faux dropdown was just a little taller in height it'd be better.<p>Secondly, this just killed iPhone support. Apple did a good job with &#60;select&#62;s on iOS and this completely breaks it. It should just turn itself off on iOS.
评论 #2793643 未加载
评论 #2794817 未加载
评论 #2793662 未加载
评论 #2793397 未加载
romanivalmost 14 years ago
The more libs like this I see, the more I feel that the core HTML controls should be improved and expanded. They are getting really, really dated and don't address a lot of common problems.<p>Things I feel would make a lot of sense:<p>Collapsible trees. Numeric sliders (preferably done like draggable digits <a href="http://worrydream.com/Tangle/" rel="nofollow">http://worrydream.com/Tangle/</a>). Native drag-and-drop sipport for elements. (And yes, this <i>can</i> be done with plain forms. I can explain how if you want.) Native rich tooltips and a standard notation to show that something has a tooltip. Maybe tabs. I think you could do tabs with CSS, but I'm not 100% sure.<p>If most UI libraries have something, it probably would be a good addtion to HTML spec. It would work faster and eventually have better compatibility.
评论 #2794918 未加载
hendrik-xdestalmost 14 years ago
Best plug-in of the year, so far.<p>Apart from what it says, I do not see problems in IE7 or IE8 (there is some style issues in IE9, though). Also, it is nearly working in IE6. I think I'll try to diddle around with some z-index and CSS stuff to get it working. Can't be much more than that.
评论 #2793185 未加载
geuisalmost 14 years ago
This nearly completely breaks the select ui on iOS. It should do some kind of feature detection so that it can disable itself on browsers that have alternate ui's for controls like this.<p>For example, this converts a select menu to an input field. On iOS the keyboard comes up instead of the select control.
评论 #2793405 未加载
评论 #2793374 未加载
thristianalmost 14 years ago
Apparently Chosen takes the placeholder text from the select element's 'title' attribute; does it also support the official HTML5 syntax[1] for placeholder attributes in select elements?<p>How about integration with jQueryUI's theming system?<p>[1]: <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#placeholder-label-option" rel="nofollow">http://www.whatwg.org/specs/web-apps/current-work/multipage/...</a>
评论 #2793294 未加载
评论 #2795579 未加载
skrebbelalmost 14 years ago
Excellent. Makes you wonder why browser vendors never improved on the usability of such controls themselves.
评论 #2793182 未加载
评论 #2793332 未加载
Inufualmost 14 years ago
Um, what use this?<p>If I click on a dropdown box, I can already type the value on my keyboard to select it. No javascript necessary.<p>(using chromium on ubuntu)
评论 #2795186 未加载
评论 #2795182 未加载
ww520almost 14 years ago
This is fantastic. ComboBox is what's missing in HTML. This is a keeper.
评论 #2793190 未加载
mickeybenalmost 14 years ago
For the multiple select, I like this one a lot: <a href="http://loudev.com/" rel="nofollow">http://loudev.com/</a><p>It's way simpler for the average user.
fooycalmost 14 years ago
The UI widgets like this all have the same defects:<p>1. They are slow, as all their markup has to be generated on the client side each time the page loads<p>2. They are not ajax friendly. I mean that if you insert a select box in a HTML document with javascript, it will remain a plain native select box unless your script specifically calls the right widget's function. So you have to update all your scripts.<p>3. They are not drop-in replacements for native widgets, all your script must know how to handle these widgets for things like getting the widget's value, listening for events, etc.<p>Points 1 and 2 could be fixed by generating the widget's HTML code on the server side and using delegated events (like jQuery's delegate()). (Progressive Enhancement can still be achieved without doing _everything_ on the client side.)<p>Other than that, the idea of a text input on the top of the options list is awesome.
PhrosTTalmost 14 years ago
I've been using the jQuery UI ComboBox for a while, it's essentially this. - <a href="http://jqueryui.com/demos/autocomplete/combobox.html" rel="nofollow">http://jqueryui.com/demos/autocomplete/combobox.html</a>
d0malmost 14 years ago
I would also add a fuzzy matching. I.e. "unitd sta" should match "United States" even with the missing "e". Or "East coast" should match "The East Coast".
InclinedPlanealmost 14 years ago
Love it! Sure it's not perfect, but it's a huge improvement already. I've had similar ideas myself but haven't gotten around to implementing them. The existing HTML input controls are clunky and haven't kept up with the pace of web development, maybe we can improve on them using CSS &#38; JS until we develop a new set of canonical input primitives that then become standardized.
myworkipadalmost 14 years ago
On the iPad, the custom control is decidedly worse. The native one is larger and more appropriate for the device. This idea of custom UI elements seems really bad. It's gonna be worse than native on any platform. The issues with native controls should be addressed on their respective platforms.
koblasalmost 14 years ago
I think it's pretty cool, though it would be nice if they had a simplified single selection version. Which is to change a single select list into a text field with "instant search". The current incarnation make me first go for the pull down rather than just tabbing over and start typing.
tomeldersalmost 14 years ago
This plugin makes the case that this sort of functionality should be implemented into browsers very well.
piquadratalmost 14 years ago
So... why don't they use this thing on their own web app? The "Project / Task" select box becomes very unwieldy with a growing client base. I spend way too much time looking for the correct project almost every time I have to create a new entry.
评论 #2799763 未加载
andosalmost 14 years ago
Writing good widgets from scratch is an endless task. It's missing ARIA roles: <a href="http://www.w3.org/TR/wai-aria/roles#combobox" rel="nofollow">http://www.w3.org/TR/wai-aria/roles#combobox</a>
naeemalmost 14 years ago
Sexy! I do agree with a previous comment that the more technologies like these that come out, the more apparant it becomes that HTML as a whole needs a long overdue makeover.
exchalmost 14 years ago
The first sentence on the linked page has a typo: "javsacript"
shawndumasalmost 14 years ago
<i>Note</i>: IE8 (and lower) support is done via Chrome Frame.
评论 #2794079 未加载
banealmost 14 years ago
Hopefully some of these ideas will end up in dojo/dijit (a couple similar takes are already there).<p>I really like the multi-select control.
MaurizioPzalmost 14 years ago
I think this is great and would like it to be a browser extension so that I can use it all over the web
评论 #2794837 未加载
gormalmost 14 years ago
Does anyone know if it's compatible with formalize.me? Does it work well on android/iphone?
评论 #2793392 未加载
评论 #2793211 未加载
nerdoalmost 14 years ago
Multi-select could use some work. Drag-highlighting, shift, ctrl, etc.
arctangentalmost 14 years ago
Awesome. This is going into my UI toolkit.
martin1balmost 14 years ago
Wow. The results are really polished!
danbergeralmost 14 years ago
Has anyone tried this on an iPad?
评论 #2793814 未加载
SolarUpNotealmost 14 years ago
I love this. LOVE it!