Asp.net mvc dropdownlist add items on scrolling

Question

I am looking for asp.net mvc dropdown list which can adds records if scrollbar is scrolled. I am completely beginner to this area. Could some one guide me on how to implement this or any reusable code such as

Scroll event takes to controller,get records and append to dropdown last item. I think any suggestion could make me understand how to deal with code logic

Here is what I tried to append to dropdown

<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
</select>

Answer 1

Jquery Code

Below is the Code for using ajax call to controller and get records then bind into to dropdown

var mySelect = $('#mySelect');
 var sIndex = 11, offSet = 10, isPreviousEventComplete = true, isDataAvailable = true;

    mySelect.scroll(function (e) {
   if($(this).scrollTop() + $(this).innerHeight()>=$(this)[0].scrollHeight)
   {   
       var scrollto=$(this).scrollTop();
       if (isPreviousEventComplete && isDataAvailable) {       
          isPreviousEventComplete = false;
        $(".LoaderImage").css("display", "block");

        $.ajax({
          type: "GET",
          url: 'Your url',
          success: function (result) {
                   $.each(result, function(val, text) {            
    mySelect.append(
        $('<option></option>').val(val).html(text)
    );
        });
           mySelect.scrollTop( scrollto );

            isPreviousEventComplete = true;

            if (result == '') //When data is not available
                isDataAvailable = false;

            $(".LoaderImage").css("display", "none");
          },
          error: function (error) {
              alert(error);
          }
        });


      }
               }
    });

Click Demo Link http://jsfiddle.net/sethuramanP/4pmKf/3/ example for add static data to dropdown whenever scroll comes end

Answer 2

You can also try this JQuery Select which will support infinite scroll of results.