<Select> widget with infinite scroll dropdown

Question

At my page i have about 20 common html select widgets. For example:

<select>
    <option>1</option>
    ...
    <option>3000</option>
</select> 

that have 3000 or more elements in each one. So i have decided to convert them to ajax selects to load items dynamically when scrolling.

How can i do this ??

Melany

What have you tried so far? Have you been able for example to retrieve all the values from ajax? Where the data in the select are coming from? The question is too broad this way to get a proper answer. BTW even with a bounty... you will find nobody on SO that will write the code for you! – Oops

i have tried all plugins in jquery, but they don't support infinite scrolling for common selects(select2 for example support only when you for autocomplete). The best solution that i found is: usamimi.info/~sutara/ajax-combobox But i could not convert pagination to scrolling.... – Melany

You can also tried jquery select2 plugin. select2.github.io Where user can search data with ajax. – Disembody

Answer 1

I have provided a set of working example of combo-box using jQuery UI selectmenu. I have used basic JSON source for ajax request, please work on this part yourself.

$(".ajax-combo").selectmenu({
  "width": "100px",
});
$(".ajax-combo").selectmenu("menuWidget").addClass("make-scrolling");
$(".ajax-combo").selectmenu("menuWidget").scroll(function(e) {
  if (e.currentTarget.scrollHeight - 10 < e.currentTarget.scrollTop + $(e.currentTarget).height()) {
    var curTar = e.currentTarget;
    var lastTop = curTar.scrollTop;
    $.getJSON("http://echo.jsontest.com/10/test/20/rest/30/best/40/vest/50/fest", function(data) {
      $.each(data, function(key, val) {
        $(".ajax-combo").append("<option value='" + key + "'>" + val + "</option>");
      });
      $(".ajax-combo").selectmenu("refresh");
      curTar.scrollTop = lastTop;
    });
  }
});

.make-scrolling {
  overflow-y: scroll;
  height: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<select class="ajax-combo">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

Covering

Answer 2

This can be achieved with simple JQuery. No need of any other plugin

var selectObj = $("#myselectbox");
var singleoptionheight = selectObj.find("option").height();
var selectboxheight = selectObj.height();
var numOfOptionBeforeToLoadNextSet = 2;
var lastScrollTop = 0;
var currentPageNo = 1;
var isAppending = false;
var currentScroll = 0;

$(document).ready(function() {
  $(selectObj).scroll(function(event) {
    OnSelectScroll(event);
  });
});

function OnSelectScroll(event) {
  var st = $(selectObj).scrollTop();
  var totalheight = selectObj.find("option").length * singleoptionheight;
  if (st > lastScrollTop) {
    // downscroll code
    $("#direction").html("downscroll");
    currentScroll = st + selectboxheight;
    $("#scrollTop").html(currentScroll);
    $("#totalheight").html(totalheight);

    if ((currentScroll + (numOfOptionBeforeToLoadNextSet * singleoptionheight)) >= totalheight) {
      currentPageNo++;
      LoadNextSetOfOptions(currentPageNo);
    }

  } else {
    // upscroll code
    $("#direction").html("upscroll");
  }
  lastScrollTop = st;
}



function LoadNextSetOfOptions(pageNo) {
  //here we can have ajax call to fetch options from server.
  //for demo purpose we will have simple for loop
  //assuming pageNo starts with 1
  var startOption = ((pageNo - 1) * 10) + 1; //for example if pageNo is 2 then startOption = (2-1)*10 + 1 = 11
  var endOption = startOption + 10; //for example if pageNo is 2 then endOption = 11 + 10 = 21

  for (i = startOption; i < endOption; i++) {
    $(selectObj).append("<option>" + i + "</option>");
  }

  $(selectObj).scrollTop(currentScroll - (selectboxheight));

}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>

<body>
  <p>Infinite scroll for select box</p>
  <select id="myselectbox" size="5">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
  </select>

  <p>Direction: <span id="direction"></span>
  </p>

  <p>scrollTop: <span id="scrollTop"></span>
  </p>
  <p>totalheight: <span id="totalheight"></span>
  </p>
</body>

</html>

Neumeyer

This is a great solution thank you, I think it has an issue though?... let's say I want to choose option 1000 and it's not loaded yet... It can't resolve this? I guess it could be improved to include this? – Intemerate