Facebook Style Multi Select

We've got a couple of projects on the go right now where a Facebook style multi-select (with or without autocomplete) is a good fit for making the user interface more, err, useable.

As ever, searching around there are a number of options - especially given the number of Javascript frameworks around. For us, things are also complicated by the fact that not all our projects use the same Javascript libraries - we're not always responsible for the front-end code and as such some clients already have a dependency on, or a preference for a given library.

The Contenders

By no means an exhaustive list, but here's a few we came across..

Prototype:

MooTools:

jQuery:

Our Experiences So Far..

So far we've used the MooTools version of TextboxList - not only do the folks at DevThought have one of my favourite looking websites, but they've also come up with a good implementation of the concept. It worked out of the box - in all it took us about 10 minutes to get it in place as required.

We also started to look at Proto!Multiselect - initially it looked as if it hadn't been updated in a while - reading around on various blogs we found a number of people had performed fixes and updates, but couldn't find a centrally updated copy. Enter, GitHub - we took a copy of the original InterRiders script and applied a number of patches from the community and put it all together into it's own repository - I can't take credit for anything here other than pulling together the various updates into one version. We haven't got round to using it yet so I suspect there will be fixes to be made. All the changes are credited to their authors - so if you spot some i've missed then let me know!

I'd planned to go through a few examples of Rails integration but i'm out of time so will have to save that for another post..

Leave a reply

You can use Markdown in your comment as well as plain HTML. You can use <filter:jscode lang="ruby"> and </filter:jscode> tags to surround code blocks (supported languages are css, html, javascript and ruby). Your email address will not be published.

If your comment doesn’t appear immediately after posting it could have been marked as spam. Don’t worry: we regularly check for and approve incorrectly filtered comments so you shouldn’t have to wait too long for it to be shown.