/    Sign up×
Community /Pin to ProfileBookmark

Loading Options on Select control on scroll event

Copy linkTweet thisAlerts:
Apr 16.2008

I have a long list (say, 10,000) to be populated in the html select (Multiple with size, say 10 visible at a time) control. I don’t want to populate all the items initially. Hence, Initially, I will load top 100 items and whenever user scrolls down and reaches the bottom of the list (say, after crossing 85th item), I want to populate the next 100 items (101th to 200th). I am using javascript to populate the options.

The question is:

  • 1.

    How to identify that the user is reaching the bottom of the control?

    Is there any way to identify whether a option is visible or not to the user?

    • Thanks in advance,

    R. Amirdha Gopal.

    to post a comment
    JavaScript

    7 Comments(s) ↴

    Copy linkTweet thisAlerts:
    @FangApr 16.2008 — 
  • 1. Not in IE, the other main browsers do support events for [I]option[/I]

  • 2. See 1.


    • 10,000 items, consider using Ajax to update the list and/or a suggest type-ahead script.
    Copy linkTweet thisAlerts:
    @jasonahouleApr 16.2008 — I agree with Fang. 10,000 items in a list is just too much. Can these perhaps be categorized? For instance, choose a category from the first drop down menu and the second one is populated with the associated items.
    Copy linkTweet thisAlerts:
    @amirdhagopalauthorApr 17.2008 — Thanks for the response.

    To Fang[/QUOTE]
    1. Not in IE, the other main browsers do support events for option

    2. See 1.[/QUOTE]
    What events are available to option in this context? Is there anything that says whether option is visible to the user or not?


    10,000 items, consider using Ajax to update the list and/or a suggest type-ahead script.
    [/QUOTE]
    How to do it using Ajax. How do we know that the user has reached the bottom of the select control.

    To jasonahoule[/QUOTE]

    I agree with Fang. 10,000 items in a list is just too much. Can these perhaps be categorized? For instance, choose a category from the first drop down menu and the second one is populated with the associated items.
    [/QUOTE]
    Sorry, this list cannot be categorized. ?
    Copy linkTweet thisAlerts:
    @FangApr 17.2008 — What events are available to option in this context? Is there anything that says whether option is visible to the user or not?[/QUOTE]
    Try this, although I doubt it works for IE [I]option[/I]s.

    To get your listing to work, x-browser, you will have to think of a solution that does not involve form elements.

    A scrolling unordered list updated using Ajax could work.
    Copy linkTweet thisAlerts:
    @jasonahouleApr 17.2008 — You could do something like this and dynamically add on to the option list. If you were to take an AJAX approach here then you would make your XHR request rather than use the for loop.

    The problem with this is that you can not add the new elements when using the scrollbar. You would have to actually use the arrow keys or select the last element before the next group would be added.
    <i>
    </i>&lt;html&gt;
    &lt;head&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;script type="text/javascript"&gt;
    function updateOptionList(index) {
    index++;
    numToAdd = 10;
    if(index % numToAdd == 0) {
    elmt = document.getElementById("mySelect");

    <i> </i> for(i=index; i&lt;(index + numToAdd); i++) {
    <i> </i> opt = document.createElement("option");
    <i> </i> opt.value = i;
    <i> </i> opt.innerHTML = i;
    <i> </i> elmt.appendChild(opt);
    <i> </i> }
    <i> </i> }
    <i> </i>}
    &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;select id="mySelect" onChange="updateOptionList(this.selectedIndex)" MULTIPLE size="2" scrollbars="0"&gt;
    &lt;option value="0"&gt;0&lt;/option&gt;
    &lt;option value="1"&gt;1&lt;/option&gt;
    &lt;option value="2"&gt;2&lt;/option&gt;
    &lt;option value="3"&gt;3&lt;/option&gt;
    &lt;option value="4"&gt;4&lt;/option&gt;
    &lt;option value="5"&gt;5&lt;/option&gt;
    &lt;option value="6"&gt;6&lt;/option&gt;
    &lt;option value="7"&gt;7&lt;/option&gt;
    &lt;option value="8"&gt;8&lt;/option&gt;
    &lt;option value="9"&gt;9&lt;/option&gt;
    &lt;/select&gt;
    &lt;/body&gt;
    &lt;/html&gt;
    Copy linkTweet thisAlerts:
    @amirdhagopalauthorApr 18.2008 — You could do something like this and dynamically add on to the option list. If you were to take an AJAX approach here then you would make your XHR request rather than use the for loop.

    The problem with this is that you can not add the new elements when using the scrollbar. You would have to actually use the arrow keys or select the last element before the next group would be added.
    <i>
    </i>&lt;html&gt;
    &lt;head&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;script type="text/javascript"&gt;
    function updateOptionList(index) {
    index++;
    numToAdd = 10;
    if(index % numToAdd == 0) {
    elmt = document.getElementById("mySelect");

    <i> </i> for(i=index; i&lt;(index + numToAdd); i++) {
    <i> </i> opt = document.createElement("option");
    <i> </i> opt.value = i;
    <i> </i> opt.innerHTML = i;
    <i> </i> elmt.appendChild(opt);
    <i> </i> }
    <i> </i> }
    <i> </i>}
    &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;select id="mySelect" onChange="updateOptionList(this.selectedIndex)" MULTIPLE size="2" scrollbars="0"&gt;
    &lt;option value="0"&gt;0&lt;/option&gt;
    &lt;option value="1"&gt;1&lt;/option&gt;
    &lt;option value="2"&gt;2&lt;/option&gt;
    &lt;option value="3"&gt;3&lt;/option&gt;
    &lt;option value="4"&gt;4&lt;/option&gt;
    &lt;option value="5"&gt;5&lt;/option&gt;
    &lt;option value="6"&gt;6&lt;/option&gt;
    &lt;option value="7"&gt;7&lt;/option&gt;
    &lt;option value="8"&gt;8&lt;/option&gt;
    &lt;option value="9"&gt;9&lt;/option&gt;
    &lt;/select&gt;
    &lt;/body&gt;
    &lt;/html&gt;
    [/QUOTE]

    Well, Its nice. But, in my case, when user selects any option in the select, i will close the select. (which is inside div, displayed like a popup.) So, this can't serve the purpose in my case.
    Copy linkTweet thisAlerts:
    @amirdhagopalauthorApr 18.2008 — Try this, although I doubt it works for IE [I]option[/I]s.

    To get your listing to work, x-browser, you will have to think of a solution that does not involve form elements.

    A scrolling unordered list updated using Ajax could work.[/QUOTE]

    Its good, but i m afraid its not for a regular list, where user can select the option in the content.
    ×

    Success!

    Help @amirdhagopal spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 6.2,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,
    )...