JQuery: Infinite input select

Question

I would like to know if it's possible to create an infinite input select using JQuery: In other words, I want to load x options in my select and load more once the user reach the bottom.

Thanks

Answer 1

There are no events you can use to detect when they have reached the bottom of a select, you could add an option at the bottom with something like "Load More" that would dynamically add new options to the list. You could even add an onmouseover event to this bottom option so that they don't have to click to load the new options.

Answer 2

I don't think it's possible just use select, maybe you could simulate a select use div or other things by yourself.

Answer 3

There is no way to detect scrolling on an actual select box, so this isn't possible as asked. You can, however, create a custom select-box looking control which is just a scrolling div and apply the feature to it.

Answer 4

I think your best option would be to create a pseudo-select control (perhaps a DIV with CSS overflow, or a scrolling multi-line textbox?).

I believe the effect you want would be similar to the scrolling lists that you can see here (choose a train jouney first):

http://tickets.eastcoast.co.uk/ec/en/JourneyPlanning/MixingDeck

Answer 5

$('#selectElm').change(function()
{
   var selIndex = $('#selectElm').attr("selectedIndex");
   var numItems = $(this).children('option').length);
   if (selIndex == numItems - 1) //then we are at the bottom item
   {
      //add new items here
   } 
});

Caveat: This only works if they select the bottom item ... not just mousing over it.