Interface for selecting multiple items out of thousands, w/ categories

Question

I'm trying to build an interface for filtering lots of data for the sake of searching. I need to present a VERY large collection of names, make it easy for the user to select all the names they need (and deselect/remove the ones they no longer want), and there are 4 different categories of names. I think it's essential to have a live search box so the user only has to sift through the names that match their query.

^{download bmml source – Wireframes created with Balsamiq Mockups}

I can't help but think someone can improve on this concept or has a more sensible alternative... Also, if anyone knows of a good JS/jQuery-based solution for this, please share! It's kinda hard to find a solid modern jQuery plugin for it (I know I saw a great one a few months ago but forgot to bookmark it). Also, am I crazy or does it not make sense to do a Drag & Drop for this seeing as there's only one place to drag the items to? Seems like just clicking the names should be the best method... And for the sake of saving vertical space I've considered using rounded rectangles instead of a regular list but it seems like it would be hard to sift through the selected items that way - I could be wrong though...

Answer 1

Here is a very well implemented multi select dropdown much like the one you mocked up.

jQuery Rain | ParamQuery Select : jQuery Multi Select Plugin

Features:

ParamQuery select a.k.a. pqSelect is an open source jQuery select plugin that converts ordinary multiple and single select lists created with and HTML tags into theme ready jQueryUI widget with support for:

• grouping via tag
• disabled options via attribute
• functionality to add checkboxes to multiple select lists
• radio buttons to single select lists,
• search box to search options
• keyboard navigation (up, down, page Up, page Down, etc)
• and many options, methods and events.

It's theme ready and supports edge detection out of the box. ParamQuery Select can be used in open source or commercial applicatons for free under GNU GPL v3 license terms.

Preview:

Note: I am in no way affiliated with this plugin I just found it and am quite fond of it

Answer 2

What I ended up going with was a sidebar with the full list of items, and then in the content section of the page there's a list of the selected items with a type-ahead at the top which is connected to the sidebar list for the users who would rather type the items they want. I greyed out the selected items in the sidebar and the "Remove" button for each item is in the Selected Items list but not sidebar list.

In my case, selecting items from the list is the first step in the user's process and there's no need to try to save space - it's much better to take up plenty of screen real estate and not have things feel cramped...