Skip to main content

jQuery multiselect widgets

While working on CrissCross I've experimented with various different jQuery MultiSelect widgets. That is, web page controls that let users easily select multiple items from a list - here's a quick round up:

Eric Hynds jQuery UI MultiSelect Widget

Description ... Demos ... GitHub

This one is rendered as a DropDown and I think overall its my favourite,  it has ThemeRoller support and there is an extra plugin that lets users do a search within the list. Here's what it looks like while 'dropped down':

Quasipartikel jQuery UI Multiselect

Description ... Blogpost ... GitHub

This one renders as a 'two listbox' layout and also has ThemeRoller support. Looks like this:

Odyniec selectList

Description ... Demos ... GitHub

This one has an ingenious design that makes it a lot more lightweight than the ones above.

With large lists (> 500 items) and slow browsers (IE6,IE7,IE8) the multiselects above can take a long time to render, simply because they are built by adding lots of components to the DOM. In some cases they will even hit the browsers javascript execution limit, which give the user one of those 'A script on this page is running slowly' messages. Although thats only a problem with large lists and outdated browsers, sometimes you have to support those.

The Odyniec selectList just adds a few simple components onto an existing Html Select element to make it into a multiselect - that means it takes much less time to render.

Basically, it adds an interactive list of chosen items under the original Select, like this:

LoopJ jQuery TokenInput

Description ... Demos ... GitHub

The TokenInput is a 'tokeniser' - you type a bit, it shows matching results and then you choose one. Then you type again, it shows matching results again, etc. This is the sort of control that is used for selecting 'tags', but it also works well as a general Multiselect if you have a very large number of items. Users dont have to scroll through the list, they just tap a few keys and then select.

The TokenInput can use a local source for the data (a javascript array) or a remote ajax source. Because it only renders the list items as they are needed, it also works well with large lists in browsers with slow javascript. It looks like this:


Popular posts from this blog

SSRS multi-value parameters with less fail

SSRS supports multi-value parameters, which is nice, but there are a few issues with them. This is how I deal with them. Two of the problems with SSRS multi-value parameters are: You have to jump through a few hoops to get them to work with stored procedures The (Select All) option, as shown above The reason the (Select All) option is a problem is that it is a really inelegant way of saying 'this parameter does not matter to me'. If you have a list with hundreds of values, passing all of them as a default option just seems wrong. Also, if your report shows the user which items they selected, printing the whole list when they choose (Select All) is excessive. So in this post I'm going to show my particular way of: Jumping through the hoops to get Multi-Value params in a stored procedure Adding a single '--All--' value that the report interprets as meaning all the options. Getting Multi-Value params to work with Stored Procedures This is

Copying data to Salesforce Sandboxes using TalenD

A common problem with Salesforce Developer Sandboxes is that they are blank. Really you're going to want some data in there, so there are various strategies for copying data from your live instance to the Sandbox. There are some paid-for solutions - SFXOrgData , Salesforce Partial Data Sandboxes - but if you've got a decent ETL tool you can build your own. There are a bunch of free ETL tools for Salesforce: JitterBit Data Loader is good for quick ad-hoc tasks but the free version makes it difficult to manage specific ETL projects or share projects with other users Pentaho Community Edition - an open source edition of the enterprise version Apatar was a free open source Salesforce ETL which still works but development seems to have stopped since 2011 TalenD Open Studio is an open source ETL tool For the task of copying data from live to a Sandbox, either Pentaho or TalenD Open Studio could be used, depending on preference. Here's a good comparison of the dif

Bug Hunter in Space

In 1987, Acorn launched the Archimedes home computer. At the time, it was the fastest desktop computer in the world, and at the time, I was fortunate enough to have one to experiment with. The Archimedes was great, but it never really took off commercially. However, it was built around the ARM processor, which Acorn had designed itself when it could not find any existing processors suitable for its 32-bit ambitions. The ARM processor was a masterpiece of simple and intuitive design, and its still around today, with most of the instruction set pretty much unchanged. In fact, you've probably got one in your pocket right now. Its design makes it process very efficiently on low energy intake, and hence it is estimated that about 98% of all mobile phones contain an ARM chip. Over 10 billion ARM chips have been shipped, and they outnumber Intel's long running x86 series of chips by a factor of about 5 to 10. I had learned programming on the BBC Model B , and when we got the A