We build Web & Mobile Applications.

< All Articles

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..




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..

Updated on 07 February 2019
First published by Chris Anderton on 11 June 2009
© Chris Anderton 2019
"Facebook Style Multi Select" by Chris Anderton at TheWebFellas is licensed under a Creative Commons Attribution 4.0 International License.