3548

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

Answer1:

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):

<a href="http://tickets.eastcoast.co.uk/ec/en/JourneyPlanning/MixingDeck" rel="nofollow">http://tickets.eastcoast.co.uk/ec/en/JourneyPlanning/MixingDeck</a>

Answer2:

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.

Answer3:

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

Answer4:

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.

Answer5:

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

Recommend

  • which one to choose between calling a function twice and storing the return value in a variable?
  • Target the textarea of a child component to copy to clipboard
  • Quote a reader macro invocation
  • meteor OSX Error: SQLITE_CANTOPEN: unable to open database file
  • angular - update directive template on click
  • Is it possible to overload ++ operators in Python?
  • App Launched from Safari Displays: Do you want to allow this page to open “(null)”?
  • Unable to find meaningful logs for ReactNative using Crashlytics
  • Get the user who clicked on the button in the spreadsheet
  • Update Stripe Credit Card with Coffeescript
  • Message passing in chrome extension not working
  • Setting up rails dev env
  • Contact us email sending is not working in codeigniter php
  • How to get list of all user CA certificates installed in an Android Device?
  • How do you save a Linq object if you don't have its data context?
  • Starting Bootstrap tour with a button after ending tour once
  • How do I add a trailing slash for Django MPTT-based categorization app?
  • Extract the data specified in brackets '[ ]' from a string message in python
  • Keep node's X and Z axes parallel to ground while rotating Y axis to face camera
  • Carrierwave default image doesn't display
  • Calling UDF on Dataframe with Serialization Issue
  • Google Chrome compositor-driven animation affected by jam in main thread
  • Using PHP & Tornado
  • CSV processing in Hadoop
  • List using with references, changes behavior when used as a member
  • Was there ever a proposal to include the URL fragment into the HTTP request?
  • Using loops in Jasmine (with injected service)
  • How can i use JQuery fadeTo() in IE 7?
  • Unable to connect to AWS RDS through PDO
  • How do I change the names of buttons on a message box?
  • How to put an object in the air?
  • Sample deviceQuery cuda program
  • Android studio import problems. (Apktool)
  • Keep rows with certain values always at the bottom while sorting in jquery tablesorter plugin
  • Building JavaFX 2.0 App on Mac, deploying on Windows
  • Request Access Token in Postman for Azure Function App protected by Azure AD B2C
  • Stop an element moving with padding on hover
  • Is there a better way for handling SpatialPolygons that cross the antimeridian (date line)?
  • 'url' requires a non-empty first argument. The syntax changed in Django 1.5, see the docs
  • How can I ssh into a server that requires 2 password authentication using python's paramiko mod