Menu
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 ??
526
Above all else, infinite scroll is designed to boost user engagement and keep viewers on the page for as long as possible. If visitors have no particular goal in mind, infinite scrolling will continue to roll out relevant content in a way that is efficient, digestible, and interruption-free.
Now, use the scroll bar to scroll down in the text until you reach the end of the desired selection. Hold down the Shift key and click to select it all.
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>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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
