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...