-1

Unlike other answers suggested to use JavaScript framework, I want to know the possible solution of displaying records too slow.

Possiblilities (my views):

1- Load just say 100 records and while scrolling to the last record, the next 100 records are displayed (total 200) and so on. ( "But how to achieve this" is the question). In this case Ajax can be used.

2- If there is any property of the element that can buffer the record or we could buffer the records with JavaScript.

Besides that, I am newbie. There has to be a work-around, kindly suggest me the right approach. Some working example will be appreciable.

document.writeln("<select>");
for(var i = 1; i < 10000; i++){
	document.writeln("<option value='" + i + "'>" + i + "</option>");
}
document.writeln("</select>");
<html>
<head>
<script src="script.js"></script>
</head>
<body>
</body>
</html>

1 Answer 1

0
 <!DOCTYPE html>
        <html>
        <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>      

        </head>
        <body>
        <!-- you can adjust showing number of data from here -->
        <select id='slr' onfocus='this.size=5;' onblur='this.size=1;' 
                onchange='this.size=1; this.blur();' >
        <option>ram1</option>
        <option>ram2</option>
        <option>ram3</option>
        <option>ram4</option>
        <option>ram5</option>
        <option>ram6</option>
        <option>ram7</option>
        <option>ram8</option>
        <option>ram9</option>
        <option>ram1</option>
        <option>ram2</option>
        <option>ram3</option>
        <option>ram4</option>
        <option>ram5</option>
        <option>ram6</option>
        <option>ram7</option>
        <option>ram8</option>
        <option>ram9</option>
        <option>ram1</option>
        <option>ram2</option>
        <option>ram3</option>
        <option>ram4</option>
        <option>ram5</option>
        </select>

        </body>
        <script>
          $('#slr').scroll(function() {
           //Its 90 px far from reaching the bottom you can adjust its value its depend on scroller size and scrollers size is depend on how much data you are showing
            if(($(this)[0].scrollHeight-$(this).scrollTop())<=90)
            {
        //you can call you ajax function here and add value in innerhtml of select tag
        alert($(this)[0].scrollHeight);

            }

        });
        </script>
        </html>
4
  • this works fine except that the list opened doesn't overlay like the default behaviour of combo box is expected. Can you fix it?
    – Imam Bux
    Jul 31, 2015 at 10:12
  • As you already mention in your question you want to load data in dropdown list when its reached at bottom and i had show you demo via alerting a message. its confusing because evertime alerting message but when you remove alert message and fetch data on scroll down everytime data fetched scrolls size will be increased and next time fetched will be called when user really scrolled it. because data is not increased so its alerting evertime. whenever someone click outside of dropdown its automatically hide like normal dropdown. or you can also click somewhere programitically. just comment alert Jul 31, 2015 at 10:37
  • create a javascript variable and every time give it value when you make request(process) and change its value when request completed successfully(comp) and 1 more value when their is no more data for fetched(no_more).next time when you going to make request check variables value if its value is "comp" then goaway otherwise stop program. Jul 31, 2015 at 10:57
  • Might not be related but I think there is actually a bug at least with Chromium Edge, sometimes even comboboxes with two elements slow my browser down to a crawl. Apr 21, 2021 at 14:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.