How would you code Gmail's "Labels" text searchable checkbox list selection drop down control in ASP.NET/Ajax/JQuery?

Question

I imagine having to interact with Gmail is a necessity for most programmers. Gmail's control for associating labels to emails is monumentally effective UI behavior.

For those unfamiliar with the behavior, it's basically a button-initiated pop up panel (drop down UI effect) containing:

1) a text entry box 2) scrollable multi-checkbox list and 3) a submit button.

...all neatly and tightly stacked on top of each other. This panel allows the user to type into the search box to control the items of the scrollable checkbox list in real time. Once all desired items are selected, the submit button initiates the server action.

I imagine the most challenging aspect would be getting the the text box control to govern which items are in the scrollable checkboxlist without having to hit the server (or ajax at most).

Answer 1

What I would do is to create a ASP.net server control and do the filtering with JavaScript. Since all of the items are displayed from the beginning, I thing there is no need for doing any Ajax call (it's not like autocompletion where it would make sense). The submit button would then be just a normal postback to the server as usual.

For providing the real-time javascript filtering you could think of implementing a servercontrol that follows the databinding mechanism of .Net, accepting a datasource and providing an appropriate databind method. Maybe it would be convenient then to convert the passed data to some JSON format that can then be easily loaded and managed on the client-side by some appropriate JavaScript function.