task Advanced Select Functionality for Twitter Bootstrap Form Helpers and MagicSuggest

Practical Problem: Create a group (multi-person) event registration feature for a forthcoming website. Users need to be able to select multiple persons and register them in bulk. Users then need the ability to add data on a registrant by registrant basis.

Technical Problem: Design a multi-select form field that allows for additional data to be assigned to selected items on a item by item basis.

UX Problem: Address the practical and technical problems without significantly impacting the complexity of the registration form. That is to say, avoid having additional steps in the registration process.

Solution

I first tried the very nice Twitter Boostrap MagicSuggest plugin. It has some built in events that made the initial setup pretty easy. Unfortunately, it ended up having limitations that made reaching the end goal very difficult (if possible at all). Specifically, the selected items are redrawn each time a new item is added or removed. From a UI/UX perspective, I now knew what I wanted, although I was still several steps from a working prototype:

http://jsfiddle.net/technotarek/WvRsK/

After some back and forth with MagicSuggest's author, I started down a new path. Ultimately, I decided to build on top of the Twitter Bootstrap Form Helper for Selects. With some custom jQuery, I got what I needed.  

http://jsfiddle.net/technotarek/NwLFW/

The final product is a select element with fuzzy search that creates a new set of fields for every registrant selected from the dropdown. As registrants are added, they are removed from the select element to avoid duplication. Removing an already-added registrant works too. Simply confirm removal and the registrant is added back to the select element.