jquery: populating a select list from an autocomplete?

Question

The basic problem: selecting a few items from a list of thousands.

The potential solution:

I have an autocomplete field that searches the db, and returns a name/id pair. This is working fine.

The next step is to preserve the selected IDs, and allow the user to remove some if needed. For this, I've been looking at using a select, and was hoping a UI something like that provided by this, but it doesn't work: it allows you to select items that already exist in the select, but doesn't work with a dynamically created select.

The final step is a traditional postback (using a submit button, this is in asp.net webforms) where I'll need to have access to the final list of IDs.

Are there other options for this?

Answer 1

Based on your comments below, there are a lot of ways to skin this cat. The following approach is similar to the SelectList idea only it doesn't use a dropdown list. The nice thing about the Listbox versus the DropdownList is that the user will be able to view many items at once. Of course, the choice of using a Listbox or a DropdownList doesn't really matter as they both essentially provide the same functionality. The key about this answer is that values are stored on the client until you're ready to submit.

1. Create an autocomplete textbox that dynamically fills a Listbox as you type.
2. Clicking on a Listbox item results in two things happeing:
   
   1. The ID of the selected item is stored in a client-side array
   2. A list of items are rendered/re-rendered on the page exactly like the SelectList. Clicking the red 'X' will remove the ID from the array and re-render the list. You'll have to do a bit of jQuery coding on your side but it isn't much.
3. The above steps are repeated until the user has selected all of their items.

Upon clicking "Save", only the selected items are submitted to the server for processsing.