8 ms·
Select2 - A better way to make select boxes (with jQuery)
- christiangenco 14y agoObligatory: what's the difference between Select2 and Chosen? (http://news.ycombinator.com/item?id=4074501 http://news.ycombinator.com/item?id=4074501)
- nathanappere 14y agoI was just about to ask this question, but there seems to be some differences: loading of remote data (I believe in chosen you have to hook yourself the ajax part), the infinite scrolling is also a good idea, and the drag & drop sort was missing.
- reedlaw 14y agoLooks like it's based on Chosen.
- cmaitchison 14y agoI chose select2 for homehelpnow.com.au because of paged ajax lookups. Check out the place search box on homehelpnow.com.au. Its AU-based, so might be a bit slower for you US folk.
- pimeys 14y agoThe biggest thing here is the AJAX loading of data. Like I said in that submission, Chosen really chokes if you have thousands of items in it.
- hexvector 14y agoChosen doesn't support adding tags dynamically. It also looks like select2's api is more friendly and convenient. I will be converting my chosen dialog to select2 as it looks like an improvement overall.
- factorialboy 14y agoDoes this have the same constraints as Chosen does on iOS and Android?
- adventureful 14y agoMaybe it's just me, but I tend to dislike loading 50kb (plus the CSS file) scripts into my applications unless the service is built around something that said script adds a ton of value for. I dunno, is 50kb relevant any longer? Still seems like the 50kb to 100kb range matters when adding in js files. At 5kb to 10kb I don't think much about it.
- powerfulninja 14y agoMinified and served compressed it's 8.51k for the JS and CSS together.
- Morg 14y agowhich is far from zero on 2G and edge, but whatever - Imho the real issue is how friggin slow is that going to be in a phone browser / how will the browser handle it (maemo nokia had a builtin handler for dropdowns for example). As some said, I'd much rather see a push to chromium source than yet another ultra heavy js css component.
- hexvector 14y agoI thought we were over thinking about file sizes on the disk. You should look at the gzip size.
- WiseWeasel 14y agoIt's annoying that Select2 and Chosen don't create a 'close menu' transparent overlay over the rest of the page, so the menu closes if you click outside of it.
- drivebyacct2 14y agoIt closes when I click outside of it.
- WiseWeasel 14y agoAh, it does on the computer. On the iPad and iPhone, it does not for some reason.
- taitems 14y agoIt's a one line fix, just the developer listening for a mousedown and not a touchstart event. https://github.com/ivaynberg/select2/issues/77 https://github.com/ivaynberg/select2/issues/77
- WiseWeasel 14y agoAh, that'll do it. Listening for a click event should work for both, no?
- taitems 14y agoA mouse is not a finger ;)
- WiseWeasel 14y agoTrue, but they can both generate click events; I've got widgets that listen for clicks and work fine on mobile Safari.
- 14y ago
- bialecki 14y agoTangential, but ever since browsers started to implement the behavior: if a select is selected and start typing, it automatically starts matching options, I don't mind them as much. It's a feature for power users and there are definitely cases where it doesn't apply (e.g. you don't know the options), but it's a big usability win. Also, for what this is doing, I think comparing it to a <select> is wrong. It's so much more powerful and really shines (and is worth 50k of JS) in situations where you couldn't even use a <select>.
- makecheck 14y agoWhile it's always good to have people exploring improvements to UI elements, it would be superior to have those improvements show up as patches to WebKit or Firefox or GNOME or whatever else. Native UI elements need the improvements; that's where UI actually belongs. On mobile in particular, there's a couple of problems with the web-page approach to UI. One, it adds yet more stuff to download that "shouldn't" be necessary just for a page to be functional. And two, if the interface is too desktop-like I bet it'll either behave badly or not work at all on an iPhone (there's a reason iOS' scroller-menu-thing looks nothing like the Mac's pop-up menu interface despite both using Cocoa). Theoretically the second problem could be addressed by code that detects the device type and presents yet another web interface for mobile, but that'll probably make the first problem of page bloat even worse.
- krsunny 14y agoGood points but I think you're preaching to the choir. The bottleneck is the W3C which is probably bogged with all sorts of red tape and politics.
- thristian 14y agoThat's why we have the WHATWG, whose mode of operation is much closer to the IETF's mantra of "rough consensus and running code".
- jacobr 14y agoIn what way does the W3C block browsers from changing the UI of form controls? Most interesting innovation happens outside of the standard's committees, and as long as it is standardized in a reasonable amount of time, that's ok.
- eurleif 14y agoThis is outside the scope of the W3C, and within the scope of browser vendors. The HTML specification doesn't say how a select element should be rendered, just that it should allow the user to choose from a list of options. That browsers all render select elements roughly the same is convention, not specification, and browser vendors could change if they wanted to.
- nhebb 14y agoIt breaks normal usage. Tab to a normal Select, press 'n' 3 times and you get New Hampshire (the 3rd item starting with 'n'). Tab to Select2 press 'n' 3 times and you get nothing.
- jakejake 14y agoTrue but this also supports dynamically loaded data with infinite scrolling and other things that a normal select can't do. I suppose it's a trade off.
- ned 14y agoIt also breaks two OSX defaults: - spacebar on a highlighted item should select it - the select menu should open on mousedown, not mouseup. Otherwise, it's a very nice piece of work.
- wittjeff 14y agoMaintaining compatibility with existing keyboard UI should be considered essential for accessibility. And I haven't bothered to check compatibility with ARIA.
- ZoFreX 14y agoIn Firefox on OS X most of the Select2 inputs don't seem to be in the tab order at all, they get skipped over. If I do have one selected and type "new" I expect to see "new hampshire" (or something else starting with new), but it drops the first character, opens the drop down and I have "ew" in the text field.
- alttab 14y agoHey, twitter did it with Bootstrap. Javascript is the assembly of the internet so lets get busy re-inventing and then breaking every wheel known to man.
- hexvector 14y agoPressing a key 'n' times was a crutch for select boxes without a text filter. This is not needed here and doesn't even make sense.
- laktek 14y agoIf you are on the look for a plugin with better auto-completion features, let me shamelessly pitch jQuery Smart AutoComplete - http://laktek.com/2011/03/03/introducing-jquery-smart-autocomplete/ http://laktek.com/2011/03/03/introducing-jquery-smart-autoco.... It got type ahead support (like in Google search field), ability to define your own filtering algorithm and robust event system which gives the flexibility to modify almost any aspect of the behaviour. Here's the GitHub repo - https://github.com/laktek/jQuery-Smart-Auto-Complete https://github.com/laktek/jQuery-Smart-Auto-Complete
- cmaitchison 14y agoA good example of select2 with paged ajax typeahead queries is the place search box at http://homehelpnow.com.au http://homehelpnow.com.au Chosen can't do that.
- cmaitchison 14y agoSorry, I meant infinite scroll not paged...
- kingfishr 14y agoAnd it has 'pragmatic control' :D
- johnx123-up 14y agoDemo broken in Chrome http://ivaynberg.github.com/select2/ http://ivaynberg.github.com/select2/
- Torn 14y agoWorks fine in my Chrome!
- koide 14y agoIs it only me or anybody else finds the multi select annoying and not at all good UX? It looks good but the means to select many values is inefficient and tiresome.
- hexvector 14y agoHave you ever seen tagging done differently? It is the most compact and efficient way to add/delete tags.
- koide 14y agoAnd since when the only use for select multiple is tagging? The problem occurs when there are few options, not virtually unlimited options and especially if they are not known in advance. Then discoverability suffers and also forces you to type three times instead of just mark them.
- robocat 14y agoIt completely failed for me on Android browsers - although I admit I gave up after a few minutes. I tried the examples (http://ivaynberg.github.com/select2/# http://ivaynberg.github.com/select2/#) on the latest native android browser, Chrome mobile, and Opera mobile.
- thomasfl 14y agoAt the time jQuery widgets like this and Bootstrap CSS seems to be the best platform for frontend development.
- alttab 14y agoor at least newest. As someone who has tried to integrate Bootstrap into the UI of an existing product I'd say only helps if you don't have a designer. The number of bugs and the amount of code you end up having to deal with isn't worth it in the cases where a native element would have performed better.
- pooriaazimi 14y agoFeature request (I might add it to the github issues later, but I don't have time right now to do it justice): I almost never, ever use a mouse (MacBook Pro's trackpad is the best pointing device I've ever encountered), but when I do, I usually select thing with ONE click of the mouse, instead of two (I'm lazy). For example, if I want to select 'Print...' under 'File' menu, I I move the cursor to the 'File' menu, hold left (or right, if I want to use something off a contextual menu) mouse button down, move the cursor down and over 'Print...' and let go of it. It's much faster I think, and I'm used to it. It's useful specially when you have to right click on something and then select an item with the left button. The old, naïve `select`s all behave as expected (as they're usually native UI elements), but this `select2 ` thing does not work like this.
- deleted 14y ago[deleted]
- jasonkostempski 14y agoLooking forward to trying the ajax stuff out even though the demo isn't working for me. I've been working with chosen on my current project which works fantastic and the dev is super responsive but I had to make my own control for large, server filtered lists and it looks and feels awful :)
- jimm 14y agoJust added this to the CMS I'm building, as a quick-and-dirty way to let users select images. ActiveAdmin was listing every image name and the user had asked for a way to filter the list. Voila!
- kymmx 14y agoPage Up and Down keys don't work.
- nathanappere 14y agoA coffeescript version would be really welcomed even if it is a pain in the ass to maintain two version of the same source code.
- namidark 14y agoI don't get what the difference between this and Chosen.js is? Can someone explain?