Programming ≈ Fun

Written by Krešimir Bojčić

Hitchhiker Guide for Multiselect

I wasted better part of last week on building my own multiselect control in Backbone.js. After some hard crashes I’ve decided to give existing plugins another twirl. Here is my overview:

jQuery UI Multiselect


jQuery UI Multiselect

Pros:

  • Mature
  • Drag & Drop is cool

Cons:

  • Crude search
  • Awkward to select (click works only on +, - signs)
  • Needs to load full data set

jquery.multi-select.js


jquery.multi-select.js

Pros:

  • Great search
  • Clickable on the whole row
  • Looks slick

Cons:

  • Relatively new
  • Badly named
  • Needs to load full data set

selectList


selectList

Pros:

  • Good/compact for small lists

Cons:

  • No search
  • Requires reselect for each option
  • Bad for larger lists

jQuery UI MultiSelect Widget


jQuery UI Multiselect Widget

Pros:

  • Good/compact for small lists
  • Heavy customizable

Cons:

  • Crude search

jQuery Tokeninput


jQuery Tokeninput

Pros:

  • Looks great(hipster compatible)
  • Support for server side search

Cons

  • Search is slow (server side)

Verdict

If you have really many options that you need to search trough I would use
jQuery Tokeninput. It looks really hip and it seems to be optimized for large sets since it leverages server side search.

It you have many options that you sometimes sequentially add one after another I think best choice is jquery.multi-select.js. Search is really fast, it looks good and it enables you to select options really fast. Also if the list is somewhat big you have a really good search that is second to none in speed, after that initial load.

I am sure there are many more out there and I am interested in your favorite one.

Comments