David Sills's muse is fueled by Bach, Beethoven, and Brahms (and Berlioz and Boulez). He has no life, which comports well with the über-geekitude to which he aspires. He reads and writes fitfully in English, Spanish, French, German, Italian (mostly medieval), C, VB, Perl.... Oh, and Java and XSLT, lots and lots of Java and XSLT. Trained somewhere in darkest Central America, he works today at DataSource, Inc., on the product team for the CASE tool Abri. David has posted 9 posts at DZone. View Full User Profile

An HTML List Builder: A Study in Applying jQuery

12.30.2008
| 39306 views |
  • submit to reddit
Recently, a client requested a particular implementation for a control in a web application. What they wanted looked like a standard Windows widget, called by Microsoft a list builder. You've undoubtedly seen a list builder: two lists next to one another, the left one initially filled with options, the right one initially empty, with buttons to move selected items from one list to the other. I recognized the idiom and got to work, thinking I'd find a solution without too much difficulty. Of course, I wasn't about to reinvent the wheel, so the first thing I did was to check through toolkits I was already using.
 
Nowadays I simply don't write JavaScript without jQuery, so I checked out the jQuery UI project, which I knew had some building blocks for making UI widgets. No such luck. There were bits I could have used if I hadn't been dealing with a client who was only interested in solutions that were useful to those needing assistive technologies. No mouse-driven drag-and-drop solutions, then. Besides, such solutions would have violated the principle of least surprise: that's not how Windows list builders work.
 
In fact, as I looked around, I was bemused to discover that no matter how widely I spread my seach net, I couldn't seem to catch a really good overall solution for this problem. There were a few good, incomplete suggestions, without a doubt, but it was increasingly clear I would have to roll my own.
 
Requirements
 
Naturally, the first thing to put together about any solution is a set of requirements. The obvious ones were these:
  1. The solution had to contain two lists
  2. Items had to be able to be moved using buttons from each list to the other
  3. The user should be able to use the solution with the keyboard only
  4. The solution had to be useful within an HTML form

Requirement 4 meant that the solution had to return a state representation that could be interpreted on a server.
After some consideration, I added the following:

  1. The selects should have the same height and width regardless of their current contents
  2. The buttons should be vertically centered on the selects and horizontally centered on each other
(These were included to suggest visually that all of the pieces belong to a single widget.)
  1. There should be buttons to move all of the contents of each list to the other
  2. There should be buttons to move any combination of items within each list up or down (in other words, to reorder the lists)
  3.  

Legacy
Article Resources: 
Published at DZone with permission of its author, David Sills.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)