Populate a DropDownList with AJAX

Question

Hello,

I have a very long list of items for a dropdownlist. As the list is very long, I would like to only show the items in the list if the user actually clicks on the dropdownlist to expand it. I found various tutorials on how to use AJAX with cascading dropdownlists but none explaining if it is possible to have just one dropdownlist which gets populated with AJAX when the user expands it.

Are there any extenders coming with the AJAX toolkit that I missed? What would be the best way of achieving this?

Thanks, Ben

Answer 1

What I would do is this:

Have one empty item in the list. When the dropdownlist receives focus then you change that one item to say Loading or something like that. Then you make the ajax call you want.

Once it completes you unbind the focus event from the dropdown so you don't reload on subsequent focus events.

Seems like it wouldn't be too difficult to do something like this.

I'll see if I can whip something up on jsfiddle if you need help.

EDIT: By the way to your question about extenders I don't know anything about that.

EDIT 2: You could try something like this:

$(document).ready(
    function()
    {
       $("#theSelect").bind("focus", function()
                            {
                                $("option:first", this).html("Loading...");
                                setTimeout(AjaxSuccessCall, 2000);
                            });
    });

function AjaxSuccessCall(data)
{
    var select = $("#theSelect");
    select.unbind("focus");
    select.children("option").remove();
}