javascript - <Select> widget with infinite scroll dropdown

At my page i have about 20 mon 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 ??

At my page i have about 20 mon 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 ??

Share Improve this question edited Aug 18, 2015 at 9:56 asked Aug 7, 2015 at 18:14 Arti 7,76213 gold badges61 silver badges132 bronze badges

1 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 ing 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! – Lelio Faieta Commented Aug 18, 2015 at 10:06
i have tried all plugins in jquery, but they don't support infinite scrolling for mon selects(select2 for example support only when you for autoplete). The best solution that i found is: usamimi.info/~sutara/ajax-bobox But i could not convert pagination to scrolling.... – Arti Commented Aug 18, 2015 at 10:22
You can also tried jquery select2 plugin. select2.github.io Where user can search data with ajax. – Shail Commented Aug 19, 2015 at 12:12

Add a ment |

2 Answers 2

Sorted by: Reset to default 7

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./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>

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

$(".ajax-bo").selectmenu({
  "width": "100px",
});
$(".ajax-bo").selectmenu("menuWidget").addClass("make-scrolling");
$(".ajax-bo").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./10/test/20/rest/30/best/40/vest/50/fest", function(data) {
      $.each(data, function(key, val) {
        $(".ajax-bo").append("<option value='" + key + "'>" + val + "</option>");
      });
      $(".ajax-bo").selectmenu("refresh");
      curTar.scrollTop = lastTop;
    });
  }
});

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

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

<select class="ajax-bo">
  <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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - <Select> widget with infinite scroll dropdown - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)