1

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

Roch
  • 21,741
  • 29
  • 77
  • 120
  • It's certainly possible, but I'm not sure why you'd want to do this in a ` – Matt Ball Jun 21 '11 at 16:22
  • I really feel sorry for your users... long input ` – Sparky Jun 21 '11 at 16:24
  • Well I was thinking of it for a CRUD interface on Google App Engine: in some case the related entity has too many entity, so instead of breaking the whole thing by not loading within 30sec a paginated select would be better. You are probably right an autocomplete text field is certainly better if the entry count goes over 50. – Roch Jun 24 '11 at 08:51

5 Answers5

1

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.

1
$('#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.

Matthew Cox
  • 13,566
  • 9
  • 54
  • 72
1

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

Widor
  • 13,003
  • 7
  • 42
  • 64
0

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.

Porco
  • 4,163
  • 3
  • 22
  • 25
0

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

wong2
  • 34,358
  • 48
  • 134
  • 179