<Select> widget with infinite scroll dropdown
At my page i have about 20 common html select widgets. For example:
-
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>讨论(0) -
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>讨论(0)
加载中...
- 热议问题