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:
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':
Description ... Blogpost ... GitHub
This one renders as a 'two listbox' layout and also has ThemeRoller support. Looks like this:
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:
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:
Comments